清除浮动的常用方法

清除浮动常分为两种：兄弟级元素和父子级元素清除浮动

兄弟级元素清除浮动：

常采用添加空白元素的方法（添加的空白元素为块级元素）：

<style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .one {
      width: 200px;
      height: 200px;
      background-color: yellow;
    }

    .two {
      width: 200px;
      height: 200px;
      float: left;
      background-color: green;
    }
    .clear{                  //给空白元素添加样式
      clear: both;
    }

    .three {
      width: 200px;
      height: 200px;
      background-color: blue;
    }
</style>
<div class="one">one</div>
<div class="two">two</div>
<div class="clear"></div>             //添加块级空白元素
<div class="three">three</div>

清除浮动前：                                                                                                                         清除浮动后：

                                                                                             

父子级元素清除浮动：

常采用的方法：

1)给父级元素添加overflow：hidden

2)给父级元素添加一个伪元素 ::after

<style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .father {
      background-color: red;
      width: 200px;
      overflow: hidden;       //第一种给父元素添加overflow: hidden清除浮动
    }

    .father::after{           //第二种给父元素添加一个伪元素
      content: '';
      display: block;
      clear: both;
    }

    .child {
      background-color: blue;
      width: 50px;
      height: 100px;
      float: left;
    }
</style>
<div class="father">box
    <div class="child">child</div>
 </div>

因为浮动元素脱离文档流，而父元素没有设置高度，所以父元素无法被子元素撑开。   

清除浮动前：                                                                                         清除浮动后：父元素被子元素撑开了