清除浮动

当一个元素设置了浮动后，它会被移出文档流，向左或向右移动，一直平移到所处容器的边框或另一个浮动元素。使用浮动可以实现一些布局效果，但是在使用时需要注意，如果父级高度未设置会出现父级容器高度塌陷的问题。比如下面这个例子:

    .box {
      width: 600px;
      background-color: rgb(224, 206, 247);
      border: 5px solid rebeccapurple;
    }

    .float {
      float: left;
      width: 200px;
      height: 150px;
      background-color: white;
      border: 1px solid black;
      padding: 10px;
    }

    .content {
      background-color: #7fffd4;
    }

  <div class="box">
    <div class="float">I am a floated box!</div>
    <p class="content">I am content inside the container.</p>
  </div>

页面显示结果:

可以用以下几种方式清除浮动：

• 设置clear清除左/右/两侧浮动

.content {
      background-color: #7fffd4;
      /* clear 清除浮动: left 左侧浮动 right 右侧浮动  both 两边浮动 */
      clear: left;
    }

结果：

• 利用块级元素清除浮动
  1）在父元素内插入不含任何内容的块级元素清除浮动

css: 
.clearfix{
	clear: both;
}

html:
  <div class="box">
    <div class="float">I am a floated box!</div>
    <p class="content">I am content inside the container.</p>
    <!-- 用于清除浮动的块级元素 -->
    <div class="clearfix"></div>
  </div>

这种方式增加了不含实际意义的元素，不利于结构化和语义化，可以换成伪元素来实现：
2）利用伪元素清除浮动

    .box::after{
      content: '';
      display: block;
      clear: both;
      height: 0;
    }

• 触发BFC清除浮动
  BFC（Block Formatting Content）块级格式化上下文。是一个独立的渲染区域，规定的内部如何进行渲染，而且不受外部影响。
  BFC布局规则：

  • BFC是页面上的一个隔离的独立容器
  • 内部的盒子会在垂直方向，一个一个地放置
  • BFC 会阻止外边距合并。仅当两个块级元素相邻并且在同一个块级格式化上下文时，它们垂直方向之间的外边距才会合并。也就是说，即便两个块级元素相邻，但当它们不在同一个块级格式化上下文时它们的边距也不会合并。
  • 计算高度时浮动元素也算在内
  • 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此
  • BFC的区域不会与float box重叠

  创建BFC

  • 根元素或包含根元素的元素
  • 浮动元素 float 不为 none
  • 绝对定位 positions 为 absolute 或 fixed
  • display 为 inline-block 、table-caption、table-cell、flex 、inline-flex
  • overflow 不为visible

根据以上关于bfc的描述，在清除浮动时可以通过触发bfc来实现效果

    .box{
      /* 触发bfc 块级格式化上下文在计算高度是也会将浮动元素的高度算在内 */
      overflow: hidden;
    }

参考链接：
深入理解BFC
BFC(块级格式化上下文)