CSS清除浮动的三种方式

1、在浮动元素后面加一个空的div，并为它清除浮动

<div class="wrap clearfix">
    <div class="content1">1</div>
    <div class="clear"></div>
    <div class="content2">2</div>
</div>

.wrap {
      500px;
     height: 400px;
     margin: 0 auto; 
     border: 1px solid red;
    }

.content1 {
      background-color: aqua;
       200px;
      height: 200px;
      float: left;
    }

.content2 {
      background-color: aquamarine;
       300px;
      height: 150px;
    }

如上图 虽然加了一个空的div，但是并没有为它清除浮动，所以目前的效果就是第三个子元素 .content2还是受到浮动的影响

那么现在为div添加一个.clear样式  让他清除浮动

.clear {
      clear: both;
    }

  

 PS：这种情况比较适合元素之间是垂直排列布局的，为了不受彼此浮动的影响。

2、利用BFC特性清除浮动