手记

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

张秋怡的回答

4人推荐
随时随地看视频
慕课网APP

热门评论

<p>不明觉厉</p>


查看全部评论