在浮动的三个注意点中，我们知道了父盒子的高度应该由子盒子的多少决定，但是浮动的子盒子又不占有实际的位置，最终导致父盒子的高度变为0，为了解决这种矛盾，我们需要清除浮动。
image.png

  1. <div class="box">
  2.     <div class="foo"></div>
  3.     <div class="bar"></div>
  4.   </div>
  6.   <style>
  7.     .box {
  8.       background-color: skyblue;
  9.       width: 600px;
  10.       /*不写高度，又没有清除浮动的话，高度变为0*/
  11.       /* height: 400px; */
  12.     }
  14.     .foo {
  15.       float: left;
  16.       width: 100px;
  17.       height: 100px;
  18.       background-color: pink;
  19.     }
  21.     .bar {
  22.       float: left;
  23.       width: 100px;
  24.       height: 100px;
  25.       background-color: darkgreen;
  26.     }
  27.   </style>

清除浮动的本质

image.png
问题的产生，究其原因是浮动的子盒子没有限制在父元素盒子的内部，而是飘了，所以我们要做的就是将浮动元素想办法限制在父盒子内。

清除浮动（clear属性）

image.png
实际开发中，常用 clear:both

清除浮动常用的四种方法

image.png

1.额外标签法（过时的写法，了解即可）

image.png

  <div class="box">
    <div class="foo"></div>
    <div class="bar"></div>
    <!-- 在所有浮动盒子的最后，添加一个clear属性的块，clear设置不允许该块的左右存在浮动元素，则其将自己单独新开一行，贴着浮动元素的底部，高度为0 -->
    <div style="clear: both;"></div>
  </div>

image.png

2.添加overflow属性

image.png

    .box {
      //隐藏溢出部分，也可用于清除浮动
      overflow: hidden;
      background-color: skyblue;
      width: 600px;
      /*不写高度，又没有清除浮动的话，高度变为0*/
      /* height: 400px; */
    }

3. 使用:after伪元素法（高级方法）

注意注意！！！！
(在最新的CSS标准中单冒号after伪元素和before元素 被 双冒号代替了，所以有些大厂的网站上写的 ::after 其实就是after伪元素)
即 :after -> ::after 代替 :before -> ::before
image.png
:after伪元素，相当于在使用这个类的盒子内部的末尾处自动添加一个空盒子，该空盒子的CSS属性就是 :after伪类中的属性。
/after伪元素默认是行内元素，需要修改为块级元素/ ，然后设置clear清除浮动。
display: block:
//content代表自动生成元素中的内容，可以为空
content: “”;
所以通过给父盒子添加after伪元素，并设置伪元素为块、清除浮动即可。
上图中的after伪元素代码等价于：

.after {
  clear: both;
} 

  <div class="box">
    <div class="foo"></div>
    <div class="bar"></div>
    <div class="after"></div>
  </div>

4.双伪元素法（::before和::after）（完全闭合法）（重要）

这种方法也是大厂使用的方法，像小米、腾讯都是用这种方法闭合浮动的。
注意注意！！！！
(在最新的CSS标准中单冒号after伪元素和before元素 被 双冒号代替了，所以有些大厂的网站上写的 ::after 其实就是 :after伪元素)
image.png

实例

<div class="box">
    <div class="foo"></div>
    <div class="bar"></div>
  </div>

  <style>
    .box::after,
    .box::before {
      content: "";
      display: block;
    }

    .box::after {
      clear: both;
    }

    .box {
      background-color: skyblue;
      width: 600px;
    }

    .foo {
      float: left;
      width: 100px;
      height: 200px;
      background-color: pink;
    }

    .bar {
      float: left;
      width: 100px;
      height: 100px;
      background-color: darkgreen;
    }
  </style>

图解：

image.png
image.png