如何用clearfix实现父元素高度自适应所有子元素？

父元素高度塌陷——开发者的常见痛点

在实际项目中，最让人抓狂的往往是父容器高度自动坍塌导致页面出现空白、布局错位、背景颜色或边框不完整等问题。是当子元素使用 float 或 position:absolute 时父元素往往“失踪”，让调试成本飙升。

什么是 clearfix？

clearfix是一种。

经典 clearfix 实现代码

.clearfix::after {
content: "";display: table;/* 创建一个块级格式化上下文 */
至于clear，both;/* 清除左右浮动 */
}

只需把 .clearfix 类添加到需要自适应子元素的父容器上，即可解决大多数因浮动引起的高度塌陷。不过，

如何在项目中使用 clearfix

左侧浮动盒子

右侧浮动盒子

上述结构中。无论 .box 元素怎样浮动，.container 都会自动包裹住它们，页面不再出现空洞。