浮动元素脱离了文档流，其父元素看不到它了，因而不会包围它。浮动会“扩散”到下一个清除浮动的元素处。这会引起不想要的页面布局效果。
清除浮动的方法有三种：
1、父元素overflow:hidden
2、同时浮动父元素
3、添加清除浮动元素。
1、父元素overflow:hidden
overflow:hidden的真正作用是防止元素被超大内容撑大。使用hidden后，元素保持其设定的高宽，超大的内容会被“剪切”掉，变为页面不可见部分。同时，overflow:hidden也能强迫父元素包围浮动子元素。
2、同时浮动父元素
浮动父元素后，父元素会紧紧包裹子元素（不管子元素是否浮动），这时父元素的高宽极有可能需要强制确定。由于父元素的浮动会导致父元素的后续元素也浮动，故需要在父元素的后续元素上清除浮动。
3、添加清除浮动元素。
由于包含元素一定会包围非浮动的子元素,而且清除会让这个子元素位于(清除一侧)浮动元素的下方,因此包含元素一定会包含这个子元素——以及前面的浮动元素。——《CSS设计指南》
父元素需要将非浮动元素包围起来，因此将非浮动元素做最后一个元素，同时父元素肯定将子元素包围起来。直接添加一个空白div清除浮动即可。
不需要额外元素的写法：
.clearfix:after {
content:".";
display:block;
height:;
visibility:hidden;
clear:both;
}
这三种方法的使用要因地制宜。比如,不能在下拉菜单的*元素上应用overflow:hidden ,否则作为其子元素的下拉菜单就不会显示了。因为下拉菜单会显示在其父元素区域的外部,而这恰恰是 overflow:hidden 所要阻止的。再比如,不能对已经靠自动外边距居中的元素使用“浮动父元素”技术,否则它就不会再居中,而是根据浮动值浮动到左边或右边了。