一、原因：
很多时候是无法给父盒子一个高度的，如果无法给高度的话，里面的子盒子浮动字后后面的元素就会挤过来，影响结构布局，所以需要清除浮动，让父盒子的高度与子盒子高度一样。
二、方法：
①、额外标签法：
在最后一个浮动元素后面添加一个 块级空标签：<div class=‘clear‘></div> 样式里面： .clear { clear: both};
②、溢出隐藏：
给父盒子添加 ：overflow：hidden；
③、after伪元素：
给父盒子添加一个 after伪元素： <div class=‘clearfix‘></div>
样式：
.clearfix:after{ content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { *zoom: 1; }
四、双伪元素：
给父盒子添加一个 两个伪元素： <div class=‘clearfix‘></div>
样式：
.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }
原文：https://www.cnblogs.com/wan520/p/14261571.html