如果子元素浮动，此时子元素不能撑开标准流的块级父元素

原因：因为子元素浮动后，脱离标准流不占位置

目的：需要父元素有高度，清除浮动给网页布局带来的影响

方法一：直接设置父元素的高度

缺点：有部分网页不能给固定高度（不推荐）

step1: 在父元素的内容最后添加一个块级元素(跟子元素同级)

step2: 给该块级元素设置clear:both

缺点: 会让html结构变得复杂（不推荐）

.clearfix::after {
      content: '';
      display: block;
      clear: both;
    }
 /* 兼容IE6,IE7 */
    .clearfix {
      *zoom: 1;
    }

.clearfix::before,
    .clearfix::after {
      content: '';
      display: table;
    }

    .clearfix::after {
      clear: both;
    }

另附: 页面布局代码

<body>
  <div class="box clearfix">
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>