25.清除浮动 & 瀑布流布局

清除浮动

确保元素能够自我清除其子元素的浮动。

• 使用 ::after 伪元素并应用 content: '' 以允许其影响布局。
• 使用 clear: both 使元素同时清除左右浮动。
• 为了让这个技巧正常工作,确保容器中没有非浮动的子元素,并且在清除浮动的容器之前但在同一个格式化上下文中(例如浮动列)没有高度很高的浮动元素。

💬 注意:这只在你使用 float 来构建布局时有用。考虑使用更现代的方法,如 flexbox 或 grid 布局。

<div class="clearfix">
 <div class="floated">浮动 a</div>
 <div class="floated">浮动 b</div>
 <div class="floated">浮动 c</div>
</div>

.clearfix::after {
 content: '';
 display: block;
 clear: both;
}

.floated {
 float: left;
 padding: 4px;
}

这个技巧解决了一个常见的 CSS 布局问题,即当元素只包含浮动子元素时,它的高度会塌陷为零。这会导致后续元素意外地溢出到浮动元素上方,破坏布局。

“clearf