关于css清除浮动原理解析

近来在做仿站练习的时候看到每个网站采用浮动清理的方法都各不相同，有的甚至同一个网页采用了不同的清理方法，是时候要在这方面做个总结了。

之所以要进行浮动清理，是因为浮动的元素会脱离普通流，导致父容器不能够包含浮动元素。

我们希望是这样：

 

 

 

 

 

结果是这样：

看了一下网上的方法，无非是两种原理：

1、利用clear属性进行清理

2、将父容器形成BFC

 

先说clear属性：

clear属性的意义就是禁止特定方向上存在浮动元素，例如clear: left就是不允许左方存在 文档流之前浮动元素（注意，这里左边如果存在文档流之后的浮动元素是无法清理的）

根据CSS权威指南，具体的实现原理是通过引入清除区域，这个相当于加了一块看不见的框把定义clear属性的元素向下挤，直到元素指定方向刚好没有浮动元素，这样看起来包含框就把浮动框给包含了，实际上浮动框脱离文本流的性质没变，它们依然是“浮”在上面的。

 

具体应用：

1、在父容器结尾插入空标签<div style="clear: both;"></div>

这种方法简单粗暴，但不符合数据与表现分离原则，弃。

 

2、利用CSS伪元素：

1 .clearfix:after {
2   content: ".";
3   height: 0;
4   visibility: hidden;
5   display: block;
6   clear: both;
7 }

这一种方法跟上面的原理一样，只不过插入的动作改由CSS来完成。

通过将这个类添加到父容器当中，会在父容器的末尾增加了一个高度为0、具有清除属性的、不可见的块级元素。

 

再说BFC：

BFC能清理浮动主要运用的是它的布局规则：

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

浮动清理利用的主要是第六条规则，只要将父容器触发为BFC，就可以实现包含的效果。

那么触发BFC有哪几种方法？

1. 根元素
2. float属性不为none
3. position为absolute或fixed
4. display为inline-block, table-cell, table-caption, flex, inline-flex
5. overflow不为visible

这里就解释了w3school上面通过对父容器添加overflow: auto;或overflow: hidden;能清理浮动的原因了。

其实就是将父容器触发为BFC，导致其计算高度时将浮动元素的高度计算在内。

明白了这个原理，可以知道对父容器添加position: absolute;或者其他满足触发BFC条件的也可以达到清除浮动的目的。