float 属性在设计之初是用来做图文混排用的：

被设置为 float 的块元素，会不按照正常文档流往下排列，而是飘向它的父容器的边缘。但是 float 最广泛的用途并不是图文混排，而是被大家当作排版工具。因为直到 flexbox 出现之前，CSS 里面并没有什么合适的排版工具，大家只能拿 float 来使用。

另外注意 float 的元素并不会撑大包含它的容器，比如容器是 200px 高，但是里面的 float 元素有 300px 高，那么它会被撑到容器外：

你可以在 float 元素的父容器中置一个 <div style="clear: both"> 来将容器撑大到足够容纳 float 元素。参考 CSS Reference。

另外，清除浮动是一个很大的坑，参考 这里。