前端基础(十一)_Float浮动、清除浮动的几种方法

原创

已于 2023-03-07 17:54:24 修改 · 1.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #浮动 #清除浮动 #float

于 2022-12-16 19:00:00 首次发布

本文详细介绍了CSS中的浮动概念，包括浮动的目的、属性及浮动元素的特点。同时，还探讨了浮动带来的问题，如父元素高度塌陷，并提供了几种有效的清除浮动的方法。

浮动

1、什么是浮动？

目的：为了让多个块级元素在同一行显示；
文档流：可显示的对象在排列时所占的位置；
浮动：使元素脱离正常的文档流，按照指定的顺序，方向发生移动，直到碰到父元素外边缘或者相邻浮动元素边框为止；
脱离正常文档流：表示浮动后不在原来的位置原来的位置不占位；
注意：只能向左或者向右移动水平方向浮动不能上下移动。
浮动了z-index提高了半层但不能覆盖文字图片所以不脱离文本流（z-index 属性只能给定位元素使用）。
在这里插入图片描述

2、浮动属性

float:left；  元素向左浮动
float:right；元素向右浮动
float:none； 默认值，元素不浮动 默认

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个页面</title>
  <style>
    .span1 {
     
     
      float: left;
      width: 150px;
      height: 100px;
      line-height: 100px;
    }

    .div2 {
     
     
      float: right;
    }
  </style>
</head>

<body>

  <span class="span1">
    我是span1
  </span