更新时间:2022-12-08 10:38:08
元素的高度由其子元素确定(除非明确设置)。例如:
The height of an element is determined by its child elements (unless it is explicitly set). E.g.:
+------A------+
|+-----------+|
|| B ||
|+-----------+|
|+-----------+|
|| C ||
|+-----------+|
+-------------+
of A取决于它的孩子C的下边界的位置。
The height of A is determined by where the lower border of its child C is.
现在,浮动元素不计入父母的高度,它们被取出常规流程:
Now, floating elements do not count towards the height of their parents, they're taken out of the regular flow:
+------A------+
+--+---------++
| B |
+---------+
+---------+
| C |
+---------+
A元素折叠为
介绍清除元素以恢复正确的高度:
Clearing elements are introduced to restore the correct height:
+------A------+
| +---------+|
| | B ||
| +---------+|
| +---------+|
| | C ||
| +---------+|
|+-----D-----+|
+-------------+
元素是具有 clear
属性集的零高度元素。这会导致它低于浮动元素(它清除它们)。这导致A有一个普通的子元素来计算它的高度。这是最典型的用例。
The D element is a zero-height element with the clear
attribute set. That causes it to fall below the floated elements (it clears them). That causes A to have a regular child element to calculate its height by. That's the most typical use case at least.
引入额外的HTML元素的更好的解决方案是将A设置为 overflow:hidden
虽然。这具有强制高度计算的效果,其具有将高度增长到期望尺寸的相同效果。这个解决方案可能有也可能没有其他副作用。
The often better solution to introducing extra HTML elements is to set A to overflow: hidden
though. That has the effect of forcing a height calculation, which has the same effect of growing the height to the desired size. This solution may or may not have other side effects though.