CSS清除浮动的方法-526互联

1、浮动的概念

在CSS中，浮动（float）是一种布局技术，用于控制元素在页面中的位置。通过将元素浮动到其容器的左侧或右侧，可以使其他元素环绕它。

常见的用法：
   选择器 {
        float: left;   //左浮动
      }

   选择器 {
        float: right;   //右浮动
      }

2、浮动的特点

（1）浮动元素脱离文档流：浮动元素会从正常的文档流中脱离，依次向上填充，使其他元素在布局时可以忽略它。

（2）其他元素环绕浮动元素：其他非浮动的块级元素会环绕浮动元素，填充浮动元素周围的空间。

（3）浮动元素不占据父元素的空间：父元素的高度将不考虑浮动元素的高度，可能导致父元素的高度塌陷。

（4）浮动元素重叠：如果多个浮动元素在同一行上，它们可能会相互重叠。

（5）浮动元素不会覆盖行内元素，浮动元素变成行内块级元素，内容多宽就有多宽。

3、消除浮动的方法

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流。

（1）父元素设置高度（不推荐：因为内容高度不固定时无法给出合适的父元素高度）

// html代码：
   <div class="father">
      <div class="child1">子元素1</div>
      <div class="child2">子元素2</div>
    </div>

// css代码：
      * {
        padding: 0;
        margin: 0;
      }
      .father {
        border: 1px solid red;
        height: 300px;
      }

      .child1 {
        background-color: skyblue;
        width: 200px;
        height: 100px;
        float: left;
      }
      .child2 {
        background-color: pink;
        width: 200px;
        height: 300px;
        float: left;
      }

（2）父元素设置 overflow：hidden

// html代码：
   <div class="father">
      <div class="child1">子元素1</div>
      <div class="child2">子元素2</div>
   </div>

// css代码：
   * {
        padding: 0;
        margin: 0;
      }
      .father {
        border: 1px solid red;
        overflow: hidden;
        margin: 0 auto;
      }
      .child1 {
        background-color: skyblue;
        width: 200px;
        height: 100px;
        float: left;
      }
      .child2 {
        background-color: pink;
        width: 200px;
        height: 300px;
        float: left;
      }

（3）添加额外空标签设置 clear：both

// html代码：
   <div class="father">
      <div class="child1">子元素1</div>
      <div class="child2">子元素2</div>
      <div class="block"></div>
    </div>

// css代码：
    * {
        padding: 0;
        margin: 0;
      }
      .father {
        border: 1px solid red;
      }
      .child1 {
        background-color: skyblue;
        width: 200px;
        height: 100px;
        float: left;
      }
      .child2 {
        background-color: pink;
        width: 200px;
        height: 300px;
        float: left;
      }
      .block {
        clear: both;
      }

（4）父元素设置伪元素 :after

// html代码：
    <div class="father clearfix">
      <div class="child1">子元素1</div>
      <div class="child2">子元素2</div>
    </div>

// css代码：
   * {
        padding: 0;
        margin: 0;
      }
      .father {
        border: 1px solid red;
      }
      /* 固定写法 */
      .clearfix::after {
        content: "";
        display: block;
        clear: both;
      }

      .child1 {
        background-color: skyblue;
        width: 200px;
        height: 100px;
        float: left;
      }
      .child2 {
        background-color: pink;
        width: 200px;
        height: 300px;
        float: left;
      }