清除浮动的本质：标准流会撑开盒子，若浮动了，浮动元素不占有位置，，父亲没有高度，底下盒子会跑上来。要做的就是闭合浮动。

方法

1.额外标签法  加空标签<div>   

<div style="clear: both;"></div>

2.父级添加overflow属性   overflow：hidden

3.使用after伪元素

1 .clearfix::after { 2 content: "."; 3 display: block; 4 height: 0; 5 clear: both; 6 visibility: hidden; 7 } 8 .clearfix { 9 *zoom: 1; 10 }

4.使用before和after双伪元素清除浮动

1 .clearfix::before, .clearfix::after { 2 content: ""; 3 display: table; 4 } 5 6 .clearfix::after { 7 clear: both; 8 } 9 10 .clearfix { 11 *zoom: 1; 12 }

使用的时候，个人习惯使用最后一种，在需要清除浮动的元素的class里直接加上clearfix即可。