浅析CSS中的浮动与清理
- 巴扎黑原创
- 2017-04-15 09:05:241322浏览
作为前端写了很多页面布局，但是浮动这块一直是我似懂非懂的盲点，一方面用浮动能实现很多布局，另一方面浮动造成的影响又会破坏布局让人头疼，所以今天就特地写篇博文解决这块盲点。
本文主要讨论以下几个问题：
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浮动的深入研究、详解及拓展(一)
张秋怡的回答
作为前端写了很多页面布局，但是浮动这块一直是我似懂非懂的盲点，一方面用浮动能实现很多布局，另一方面浮动造成的影响又会破坏布局让人头疼，所以今天就特地写篇博文解决这块盲点。
本文主要讨论以下几个问题：
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中的浮动与清理的详细内容。更多信息请关注PHP中文网其他相关文章！