什么时候需要清除浮动以及清除浮动的方法

其实浮动float最开始出现的意义只是为了让文字环绕图片而已。但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便。但这样做也会带来问题......

我们希望看到这样的效果：

希望看到的效果

但结果却是这样：

实际的效果

这个时候，我们就要清除浮动带来的影响——父元素高度塌陷了。

这里引用张鑫旭大神观点：

撇开浮动的“破坏性”，浮动就是个带有方位的display:inline-block属性。

一目了然：如果我们给上面的三个绿颜色的方块设置display:inline-block也能达到让它们并排显示的效果。并且父元素的高度也不会塌陷。只不过无法控制是居左还是居右，display:inline-block只能从左往右。

---

来看看我们如何清除浮动

我们说的清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响。

1. 为父元素设置高度
   为父元素定高，简单粗暴，坏处不用多说吧，没有人会这么干的...^_

2. 在父元素的最后设置clear:both

<div class="p">
        <div class="c"></div>
        <div class="c"></div>
        <div class="c"></div>
        <div style="clear:left;"></div> <!--冗余的子元素-->
</div>

当添加了最后一个冗余元素（未设置clear:both）时；父元素和此冗余元素的高度都为0，并且三个浮动的元素都浮在了它们的上方盖住了它们（可以把它们看成PS中的图层）。现在，给这个冗余元素添加clear:both（clear属性介绍），它便要躲开这三个浮动元素，因此，一直往下跑，直到没有被浮动元素盖住才停下来。而父元素看到这个子元素跑开了，自然想要包裹住它。

加了`clear`后冗余元素由位置1跑到了位置2

这样就能看到我们想要的结果了——父元素高度被撑开了。

大功告成

貌似不错，不过似乎有点问题——我们有必要在页面中添加这么多没有意义的冗余元素吗？显然这样太麻烦，而且不符合语义化。
还好有 伪元素，这里我们使用 ::after。添加一个类 fix：

.fix::after { 
        content:"."; 
        display:block; 
        height:0; 
        visibility:hidden; 
        clear:both;
}

在我们需要清除浮动时，只需要给父元素追加fix类就能达到清除浮动的效果，既方便又符合语义化。

<div class="p fix">
        <div class="c"></div>
        <div class="c"></div>
        <div class="c"></div>
</div>

当然，大神的fix类这么写：

.fix::after { 
        content:""; 
        display:table; 
        clear:both;
}

大师手笔，看起来更清爽了......

3. 给父元素添加overflow:hidden
   这里有必要了解一下BFC块级格式化上下文，只说结论：

创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC， 它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。它具有以下特征：

1. 内部的Box会在垂直方向，从顶部开始一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加。
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box叠加。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
6. 计算BFC的高度时，浮动元素也参与计算。

看到第六条，如获至宝。只需给父元素创建块级格式化上下文，就可以让浮动的元素参与高度计算，这样一来，父元素的高度就有了。
不单单只有给父元素添加overflow:hidden才可以创建块级格式化上下文，下列方法都可以：

• 浮动 (元素的 float不为 none）
• 绝对定位元素 (元素的 position为 absolute 或 fixed)
• 行内块 inline-blocks (元素的 display: inline-block)
• 表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)
• 表格标题 (元素的 display: table-caption，HTML表格标题默认属性)
• overflow的值不为 visible的元素
• 弹性盒子 flex boxes (元素的 display: flex 或 inline-flex)

用overflow:hidden较多的原因是不会带来其它的布局问题。

作者：xyfun
链接：https://www.jianshu.com/p/5a7854a73298
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。