CSS: Concept: Float

20th August 2020 at 2:19pm
CSS: Concept

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

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

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

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

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