理解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浮动的深入研究、详解及拓展(一)

张秋怡的回答