为什么要清除浮动？

1、为什么要清除浮动

浮动本质是用来做一些文字混排效果的，但被我们拿来做布局用，则会有很多的问题出现。

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。

准确地说，并不是清除浮动，而是清除浮动后造成的影响。

2、清除浮动的本质

清除浮动的本质：主要为了解决父级元素因为子级浮动引起内部高度为 0 的问题。

再来解释下：在标准流下面，一个父 <p> 没有设置 height 属性，那么它的高度就会被子元素的高度撑开。但是如果这个父 <p> 中的子元素是浮动的话，如果父 <p> 下面再有一个兄弟 <p>，那么这个兄弟 <p> 就会遮挡这个父元素。这个现象也叫浮动溢出。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      height: 200px;
      border: 1px solid red;
      width: 300px;
      overflow: hidden;
    }
    .big {
      width: 100px;
      height: 100px;
      background-color: purple;
      float: left;
    }
    .small {
      width: 80px;
      height: 80px;
      background-color: blue;
      float: left;
    }
    .footer {
      width: 400px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="father">父 div
    <div class="big">子 div</div>
    <div class="small">子 div</div>
  </div>
  <div class="footer">兄弟 div</div>
</body>
</html>

补充：现代项目几乎不再需要"清除浮动"，因为：

  • flex / grid 布局 已经取代 float 用来做主流布局；
  • 单纯需要"BFC 让父元素包含浮动子元素"时，可以直接给父元素 display: flow-root，更符合语义。
  • 牢记 "浮动是文字混排用的，不应该被当成布局工具"，现代工程里只在兼容老 IE 或图标环绕等场景才使用。