理解CSS浮动与清除浮动

本文主要探讨两个问题&＃xff1a;

1. 为什么CSS设置浮动会引起父元素塌陷

2. 为什么设置clear:both能清除浮动&＃xff0c;并撑开父元素。

起因

CSS的浮动&＃xff0c;算是我在写网页时用的最多的属性之一。但要说我对浮动的了解程度的话&＃xff0c;只能说“知其然而不知其所以然”。虽然很多人都说浮动会用就行&＃xff0c;但是要想成为一个优秀的前端&＃xff0c;对这些常用属性得知根知底。

恰巧在慕课网&＃xff0c;张鑫旭老师开了《CSS深入理解之float浮动》这门课。链接在文末&＃xff0c;有兴趣的可以听听&＃xff0c;老师讲课风格很风趣……

Float的历史

Float设计的初衷&＃xff0c;是为了实现文字环绕效果。就像下图展示的一样&＃xff08;图片源于w3school&＃xff09;&＃xff1a;
#div {border: 5px solid red;width: 600px;
}

最后效果是这样的:

通过chrome控制台&＃xff0c;可以看到此时div的高度为464px。

接下来&＃xff0c;我们给那张图片添加浮动效果。

#div img{float: left;
}

再看网页&＃xff0c;发现父元素已经塌陷了,之前的边框也消失不见了&＃xff0c;成为一条线了。

此时再去控制台查看div的高度&＃xff0c;高度为0px。

不&＃xff0c;不是BUG

很多人把这个现象称为浮动带来的BUG。但从一开始Float的用途来思考&＃xff1a;

“Float设计的初衷&＃xff0c;是为了实现文字环绕效果。”

那么&＃xff0c;在那远古蛮荒的互联网时代&＃xff0c;要如何实现文字环绕图片的效果呢&＃xff1f;机智的程序员加入了Float属性&＃xff0c;也引入了子元素浮动&＃xff0c;父元素高度塌陷的特性。
看到这句话的时候&＃xff0c;我思考了很久。因为无法理解父元素高度塌陷为何能让文字环绕图片。于是把视频来来回回看了十多遍&＃xff0c;又手写了个demo&＃xff0c;总算理解了。

总结来说&＃xff0c;核心要点在于一句话&＃xff1a;

“浮动元素会脱离文档流。”

至于文档流是啥&＃xff0c;我这儿就不介绍了。但浮动的元素脱离了文档流&＃xff0c;所以是不计算高度的。
在此&＃xff0c;我们加入一段话&＃xff0c;看看div的高度。

从图中可以看出&＃xff0c;div因为段落的加入&＃xff0c;高度被撑开了。

所以子元素浮动引起父元素高度塌陷的原因如下&＃xff1a;
因为没有预先设置div高度&＃xff0c;所以div高度由其包含的子元素高度决定。而浮动脱离文档流&＃xff0c;所以图片并不会被计算高度。此时的div中&＃xff0c;相当于div中子元素高度为0&＃xff0c;所以发生了父元素高度塌陷现象。

文字环绕效果的实现

那么&＃xff0c;文字环绕效果是如何实现的&＃xff1f;
其实讲起来也很简单&＃xff0c;因为父元素高度塌陷&＃xff0c;所以文字会按正常顺序排列&＃xff0c;无视图片高度。而图片宽带又还在&＃xff0c;所以实现了文字环绕效果。

清除浮动

介绍完浮动&＃xff0c;自然要介绍清除浮动。在此&＃xff0c;我们不具体的去探讨各种清除浮动的方式。而是去探讨&＃xff0c;为何设置clear:both能清除浮动&＃xff0c;并撑开父元素。

clear:both的作用

clear:both的作用&＃xff0c;对各位来说可以算是耳熟能详了。至于clear的left,right等属性&＃xff0c;我们这儿就不一一列举了。

在父元素内的底部&＃xff0c;加入这一行代码。看图易知&＃xff0c;父元素因为子元素设置浮动而高度塌陷的问题&＃xff0c;已经被解决了。

然后如果只是会用clear:both&＃xff0c;又怎么能满足我的求知欲呢&＃xff1f;相比与这行代码产生的作用&＃xff0c;我更关心为什么这行代码能清除浮动。
对此&＃xff0c;我继续翻阅文档。
在w3school中&＃xff0c;clear的定义如下&＃xff1a;

clear 属性规定元素的哪一侧不允许其他浮动元素。

当然&＃xff0c;这样看&＃xff0c;还是很难理解为什么clear能清除浮动并撑开父元素高度。那我们举个栗子&＃xff01;
当先声明一个元素A向左浮动时&＃xff0c;由于脱离文档流&＃xff0c;这个元素的右边就会空出一片空间&＃xff0c;空间的长宽与浮动元素长宽相同。
然后我们再声明另外一个元素B&＃xff0c;如果元素A右侧空出的空间内&＃xff0c;还能放下元素B的话&＃xff0c;那么元素B就会自动补上去。
下面我写一个demo&＃xff0c;应该就很好理解了。
HTML部分如下&＃xff1a;

CSS部分如下&＃xff1a;

#div {border:5px solid red;width:400px;
}
#a {background:rgba(149, 149, 149, 0.42); // 为了方便演示&＃xff0c;A的背景色设置成半透明。width:200px;float: left;
}
#b {background: #6EEBC1;width:300px;
}

效果图长这样&＃xff1a;

从图上可以看到&＃xff0c;元素B的一部分是在元素A空出的空间内的。并且I&＃39;m divB这句话在元素A的右侧。且父元素高度塌陷&＃xff0c;父元素现在的高度就是元素B的高度。
那么如果元素A右侧空出的空间内&＃xff0c;放不下元素B呢&＃xff1f;
我们把元素B宽度调整为200px。

可以看出&＃xff0c;元素B就自成一行了。

给元素B加入clear:both后&＃xff0c;元素B将忽略左边浮动所产生的空间&＃xff0c;不去补空缺。

如图所示&＃xff0c;元素B会另起一行。而不是缩到浮动产生的空间内。

撑开父元素空间的奥秘

在w3school中&＃xff0c;clear的定义中还有这么一句话&＃xff1a;

“在 CSS2.1 中&＃xff0c;会在设置清除浮动的元素上外边距之上增加清除空间&＃xff0c;而外边距本身并不改变。”

也就是说&＃xff0c;因为浮动而产生的空白空间&＃xff0c;会被填充为实际存在的空间。。那么&＃xff0c;自然就能撑开父元素。

总结

总结下来&＃xff0c;浮动与清除浮动的顺序关系如下&＃xff1a;

1. 设置元素A浮动&＃xff0c;元素脱离文档流&＃xff0c;不计算高度。父元素出现高度塌陷。

2. 浮动元素A产生空白空间。空间长宽等于元素A的长宽。后面元素会自动补空缺。

3. 给浮动元素之后的元素B设置clear:both&＃xff0c;元素B将不去补空缺。

4. 元素B不仅不补空缺&＃xff0c;还会把元素A因浮动而产生的空白空间填充为实际空间。

5. 实际空间被计算高度&＃xff0c;父元素被撑开。

这么一番走下来&＃xff0c;花了很多时间去思考&＃xff0c;去写demo。但对CSS浮动的理解也加深了。浮动为何引起父元素塌陷和清除浮动为何能撑开父元素这两个问题&＃xff0c;一直是我的盲点。所以这次寒假&＃xff0c;集中了两天时间去攻克它&＃xff08;除夕和正月初一&＃xff0c;大过年的写代码&＃xff0c;感觉有点怪但效率却出奇的高……&＃xff09;。

参考链接&＃xff1a;

《CSS深入理解之float浮动》-- 张鑫旭&＃xff08;也是课程地址&＃xff09;
CSS clear 属性
clear:both 为什么不起作用&＃xff1f;--知乎&＃xff0c;田雅文的回答

前端路漫漫&＃xff0c;且行且歌。
最后附上本人博客地址和原文链接&＃xff0c;希望能与各位多多交流。

Lxxyx的前端乐园
原文链接&＃xff1a;寒假前端学习(8)——理解CSS浮动与清除浮动