• 如图，当我们设置浮动时候，会导致父级元素的高度塌陷。这个时候我们将使用清除浮动的方式来解决这个问题。

创造清除浮动的方法

• 一般情况下，我们会添加一个clearfox的一个class类

 <header class="main-header clearfix">
      <h1>代码介绍</h1>
      <nav>
        <a href="./blog.html">BLOG</a>
        <a href="#">挑战</a>
        <a href="#">弹性盒子</a>
        <a href="#">CSS</a>
      </nav>

• 接着从CSS写入清除浮动的代码

.clearfix::after {   ##创建一个伪元素，相当于添加一个div
  clear: both; ##清除所有的浮动效果
  content: "";  ##伪元素必须要填写内容，内容直接为空
  display: block;  ##默认是内联元素，这里我们要使用块元素来恢复浮动塌陷
}