浮动元素不同于普通文档流的元素，它们的高度不会加到父元素上。我们来看一个例子：

浮动布局

上图中main模块下包含了一个标题和4个块，其中四个高度不同的块被包含在一个div容器中。页面想要的效果是四个块在底部两列布局，并保持整齐。

我们给main元素添加了一个背景色（#ddd），但是只体现到了标题（h1）上。要解决这个问题，就要清除浮动:

清除浮动

在给main加上清除浮动后，容器的高度就正常了。注意我们使用的是给main添加了伪元素来清除浮动。

虽然我们解决了main高度的问题，还有一个问题：浮动元素的外边距不会折叠到浮动容器的外部，非浮动元素的外边距则会正常折叠。现象就是标题的外边距在容器外面折叠了，main和标题顶部之间的间距不见了。我们换一种清除浮动的写法：

清除浮动

上面使用了display: table，而不是display: block。给::before和::after伪元素都加上这一属性，所有子元素的外边距都会包含在容器的顶部和底部之间。这种清除浮动的的效果更加符合预期。

为什么使用display: table能够生效呢？

因为创建一个display: table元素，也就是在元素内隐式创建了一个表格行和一个单元格。外边距无法通过单元格元素折叠，所以也就无法通过设置了display: table的伪元素折叠。

还有一个问题，块1的高度比块2高，导致块3不是排列在块1的正下方，而是到了块1的右下角。要想修复这个问题也很简单：清除第三个浮动元素上面的浮动。更通用的做法是，清除每一行第一个元素上面的浮动：

清除每行第一个元素浮动

现在我们使用float实现了一个两行两列的布局，解决了浮动属性的一些常见问题，总结了一个推荐的写法，你学到了吗？欢迎在评论区留言和我交流～