清浮动 - 简书

清浮动

清浮动：清浮动是用在浮动元素的父级身上，清浮动并不是不让浮动元素浮动，而是清除浮动元素脱离页面流之后，对父级的影响（浮动元素浮动后不再占用父级的空间，使得父级高度为0）

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的浮动</title>
    <style>
    .outer{
      border: 5px solid #000;
      width: 1000px;
    }
    .con1{
      width: 400px;
      height: 150px;
      background: red;
    }
    .con2{
      width: 400px;
      height: 100px;
      background-color: pink;
      float: left;
    }
    .con3{
      width: 400px;
      height: 180px;
      background-color: #8dff5f;
      float: left;
    }
    </style>
<html>
<body>
<div class="outer">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>
</body>
</html>

清浮动的五种方法：

1.给父级元素添加overflow属性，实际是开启BFC（开启BFC有五种方法，详细见BFC文章），常用overflow：hidden，但是BFC代码都有自己的其他效果（例如overflow：hidden的实际效果是超出隐藏），在不影响代码的情况下可以使用BFC清浮动。

.outer{
  border: 5px solid #000;
  width: 1000px;
  overflow: hidden;
}

在所有浮动元素的最下边书写一个空标签（块级标签），并给这个空标签一个样式：style="clear: both;"，在结构中多书写一行标签，有时候会影响代码

<div class="outer">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div style="clear: both;"></div>
</div>

3.在所有浮动元素最下边书写一个br，给br标签书写一个属性：clear="all"

<div class="outer">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <br clear="all"></br>
</div>

4.给父级元素设置一个高度，但基本不用

.outer{
  border: 5px solid #000;
  width: 1000px;
  height: 330px;
}

5.给父级书写after伪元素替代直接在浮动元素下书写空标签的方法(方法2）
一般可以直接命名一个清浮动的类名（clearFix)，将来如果需要清浮动，直接把类名给浮动元素的父元素即可。

.clearFix:after{
  /*伪元素没有content属性是不生效的*/
  content:"\200B";/*空字符*/
  height:0;/*高度为0不占用空间*/
  display: block;/*清浮动的标签是一个块元素*/
  clear:both;
}

因为低版本的IE不支持伪元素，所以要在低版本IE中给父元素开启haslayout（其实就是我们现代浏览器的BFC）。

.clearFix{
  /*  *是css hack，设置zoom有一个作用是开启haslayout  */
  *zoom: 1;
}

最后编辑于：2019.08.13 21:09:02