清除浮动的方式以及为什么要清除浮动浮动浮动将元素排除在普通流之外，及元素将脱离文档流，不占据空间。浮动元素碰到包含它的

浮动

浮动将元素排除在普通流之外，及元素将脱离文档流，不占据空间。浮动元素碰到包含它的边界或浮动元素的边界停留。

为什么要清除浮动

子元素浮动后，不占位置，父元素的高度无法被撑开，影响与父元素同级的元素。
与浮动元素同级的非浮动元素（内联元素）会跟随其后。
若非第一个元素浮动，则该元素之前的元素也需要浮动。否则会影响页面显示的结构解决方法。

清除浮动的方式

使用CSS中的clear:both；(放一个空标签，并设置上述css，注意该标签必须是块级元素)，属性清除元素的浮动。可解决问题2、3
对于问题1，添加如下样式，给父元素添加，clearfix样式

 .clearfix:after {
      content: '.';
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }

    /* for IE */
    .clearfix {
      *zoom: 1;
    }

3、给父级元素设置双伪元素

<!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>
    .clearfix:after {
      /* 设置内容为空 */
      content: '';
      /* 高度为0 */
      height: 0;
      /* 行高为0 */
      line-height: 0;
      /* 将文本转换为块级元素 */
      display: block;
      /* 将元素隐藏 */
      visibility: hidden;
      /* 清除浮动 */
      clear: both;

    }

    /* for IE */
    .clearfix {
      /* 为了兼容IE */
      *zoom: 1;
    }
  </style>
</head>

<body>
  <div class="container clearfix">
    <div class="wrap">aaa</div>
  </div>
</body>

</html>

给父级元素设置overflow:hidden; 或overflow:auto;本质是构建一个BFC