为什么当存在浮动元素时会忽略上边距
经常观察到,如果存在浮动元素,则 HTML 元素的上边距会被忽略它前面的浮动元素。此行为源于 CSS 规范,该规范指出“在浮动框之前和之后创建的非定位块框垂直流动,就好像浮动不存在一样。”
在这种情况下,浮动元素不会不参与顶部边距的计算。因此,后续元素似乎与浮动元素相邻,没有任何间距。
要纠正此问题,一个简单的方法是在后续元素周围引入一个包装元素。该包装器将充当缓冲区,将浮动元素与包装内容分开。
至关重要的是,包装器的间距应指定为内部填充而不是边距。这可以确保外部因素(例如其他浮动元素)不会干扰包装器和浮动元素之间的间距。
为了进行说明,请考虑以下修改后的 HTML 片段:
<div>
通过使用这种方法,即使存在浮动元素,您也可以确保后续元素遵循指定的上边距。
以上是为什么当浮动元素位于顶部边距上方时,顶部边距会塌陷?的详细内容。更多信息请关注PHP中文网其他相关文章!