理解CSS浮动与清除浮动_HTML/CSS教程_开发教程

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

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

Float的历史

Float设计的初衷，是为了实现文字环绕效果。就像下图展示的一样（图片源于w3school）：

嗯，就这么简单。

在这儿，我们用一个例子来说明子元素设置浮动，从而引起父元素高度塌陷的问题。
首先写一个div，里面插入一张图片。

我们再给div设置一个border，为了让大家看的清楚。 CSS设置如下：

#div { border: 5px solid red; width: 600px; }

最后效果是这样的: 通过chrome控制台，可以看到此时div的高度为464px。

接下来，我们给那张图片添加浮动效果。

#div img{ float: left; }

再看网页，发现父元素已经塌陷了,之前的边框也消失不见了，成为一条线了。此时再去控制台查看div的高度，高度为0px。

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

“Float设计的初衷，是为了实现文字环绕效果。”
(责任编辑：好模板)