元素的高度由其子元素确定(除非它被明确设置).例如.:
+------A------+
|+-----------+|
|| B ||
|+-----------+|
|+-----------+|
|| C ||
|+-----------+|
+-------------+
A的高度由其孩子C的下边界在哪里决定.
现在,浮动元素并不计入父母的身高,他们被淘汰出来:
+------A------+
+--+---------++
| B |
+---------+
+---------+
| C |
+---------+
A元素被折叠到最小高度,因为它的两个孩子被浮动.
引入清除元素以恢复正确的高度:
+------A------+
| +---------+|
| | B ||
| +---------+|
| +---------+|
| | C ||
| +---------+|
|+-----D-----+|
+-------------+
D元素是清除属性设置的零高度元素.这导致它落在浮动元素之下(它清除它们).这导致A有一个常规的子元素来计算它的高度.这是至少最典型的用例.
引入额外HTML元素的更好的解决方案是将A设置为overflow:hidden.这具有强制高度计算的效果,其具有将高度增长到期望尺寸的相同效果.这个解决方案可能有也可能没有其他副作用.