前端Wiki/CSS/进阶/传统布局

清除浮动

解决父级高度塌陷，主流有两种做法：

clearfix 伪元素法（推荐）：给父元素加一个类，用 ::after 在内部末尾生成一个清除浮动的隐形块。不添加多余标签，一劳永逸。
overflow 法：给父元素设置 overflow: hidden 或 auto，触发 BFC（块级格式化上下文），父元素会把浮动子元素算进高度。副作用是会把超出容器的部分裁掉。

早期还有一种在末尾手写 <div style="clear:both"> 的空标签法，污染结构，已被淘汰。理解 clearfix 的原理比背代码更重要：它本质是在文档流内放了个「钉子」，把父元素撑起来。

本节要点首选 ::after 伪元素 clearfix；overflow:hidden 利用 BFC 也能清浮动但会裁剪内容；不要用空 div 加 clear 的老办法。

CSS

<style>
  /* 经典 clearfix：加给包含浮动的父元素 */
  .clearfix::after {
    content: '';            /* 伪元素必须有内容 */
    display: block;         /* 块级才能清浮 */
    clear: both;            /* 清除左右浮动 */
  }
  .box { border: 2px solid teal; }
  .float-left {
    float: left; width: 80px; height: 50px;
    background: #bfe3d0;
  }
</style>
<div class="box clearfix">
  <div class="float-left">浮动块</div>
  <p>父元素不会塌陷，边框包住了浮动块。</p>
</div>

🔗 相关词条文档流伪元素 div 标签元素

📚 推荐阅读

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

移动前端开发经验指南万象云档

Element Plus v2.2 组件库教程万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读