理解CSS浮动与清理

做为前端写了不少页面布局，可是浮动这块一直是我似懂非懂的盲点，一方面用浮动能实现不少布局，另外一方面浮动形成的影响又会破坏布局让人头疼，因此今天就特意写篇博文解决这块盲点。

本文主要讨论如下几个问题：
1.浮动的原始用途
2.浮动为何会有文本环绕效果
3.如何清理浮动形成的影响

浮动的原始用途

如下内容来自张鑫旭大神的《CSS float浮动的深刻研究、详解及拓展(一)》：

假设如今CSS中没有浮动(float)属性，那么会变成一个什么样子。咱们会发现，目前流行采用浮动方法实现的不管是分栏布局，仍是列表排列咱们均可以用其余一些CSS属性（不考虑table）代替实现，惟一一个实现不了的就是“文字环绕图片”，我是想不出来能有什么方法可让文字环绕图片显示。好，这个替代不了的做用才是float真正的意义所在。

总结起来一句话：实现文本环绕图片的效果。

浮动为何会有文本环绕效果

产生这个疑问主要来自于以往的印象：

浮动的元素是脱离文档流的。

咦？你都脱离文档流了不是应该和下方未浮动的元素重叠吗，为何文本还能环绕你呢？

这个问题一直困扰着我，直到我看到《精通CSS》这本书。文中写到：

浮动会让元素脱离文档流，再也不影响不浮动的元素。实际上，并不彻底如此。若是浮动的元素后面有一个文档流中的元素，那么这个元素的框会表现得像浮动根本不存在同样。可是，框的文本内容会受到浮动元素的影响，会移动以留出空间。

也就是说，浮动元素的确脱离了文档流，所以文档流中的块框会无视浮动的元素，可是文本不会。这点与绝对定位的脱离文档流不同。

知乎上张秋怡学姐的回答也印证了这一观点。

补充一点：文档流这个说法其实不许确，在W3C标准中，只有普通流(normal flow)，可是许多国内文章和翻译的书籍里用的都是文档流，长此以往你们就都用文档流的说法了。

如何清理浮动形成的影响

其实浮动带来的影响主要是

1.元素脱离普通流形成的父元素高度塌陷
2.下方非文本元素与浮动元素重叠，破坏了本来布局

要清理这些影响，不少人都知道用clear属性,为何clear能清除浮动呢？

有两种说法：
1.浏览器在设置clear元素的顶上添加足够多的外边距，使元素上边框边界垂直降低到浮动元素下外边距的下面。
2.在设置clear元素的上外边距之上增长清除空间，而外边距自己不改变。

前者是CSS1和CSS2的实现原理，后者是CSS2.1的实现原理。但不管哪一种都达到了给浮动的元素留出了垂直空间，看上去清除了浮动的效果。同时，在设置clear元素之上填充的空间是实际存在于普通流中的。所以，父元素高度被撑开了。

关于清除浮动，其实还有许多方法。在《那些年咱们一块儿清除过的浮动》这篇文章里，将清除浮动的方法简单分为两类：

1.经过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是经过 content 在元素的后面生成了内容为一个点的块级元素；
2.经过设置父元素 overflow 或者display：table 属性来闭合浮动。

几乎全部清除浮动的方法均可以概括到这两类中，这里结合上面的博文谈一谈，添加伪元素的方法：

1.display: block，使生成的元素以块级元素显示，占满剩余空间。
2.在content中添加一个点，由于这个字符很是小。
3.设置height为0，由于不但愿这个新的内容占据空间破坏布局高度。
4.将visibility设置为hidden，使生成的内容不可见，容许可能被生成的内容盖住的部分能够点击和交互。
5.clear:　both清理浮动的影响

代码以下：

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

这种方法在大多数现代浏览器中都是有效的，也是比较推荐的。至于其余方法网上有不少，这里就不详细讲了。

本文借鉴了部分其余博客与文档，附上连接：

参考连接：

CSS clear属性

CSS 浮动

理解CSS浮动与清除浮动

那些年咱们一块儿清除过的浮动

noraml flow

CSS float浮动的深刻研究、详解及拓展(一)

张秋怡的回答