通常我们创建一全页面的布局时，浮动是一种常用的方法，也是页面元素定位的一种基本功能。浮动可以让元素一个挨着一个。浮动可以创建一个自然流布局，同时充许元素设置自身尺寸和其父元素容器的尺寸大小。
虽然 浮动 很好用，但是使用上还是存在一定的问题。最典型的问题就是一个父元素包含了多个浮动的子元素。页面的内容设置了一个宽度，子元素的浮动确定了他们的位置，但浮动元素不会影响父元素的宽度。这样做会让父元素塌陷，从而使父元素的高度为“0”，以及忽略其他的属性。
今天我们就来说说几种清浮动的方法：
1、html的方法：
在容器的结束标签前添加一个空标签，在空标签上直接设置样式“clear:both”。<div style="clear:both"></div>
缺点：用这种方法来清除浮动，在大多数情况下是有效的，但这不太适合语义化。而且如果有很多浮动需要清除，这样就会造成页面上的空标签迅速堆积，而且在页面中没有上下文内容。
2、css的方法：
1、使用“overflow”属性，在具有浮动元素的父容器中设置“overflow”的属性值为“hidden”，这样父容器就会有一个高度存在。
缺点：当你添加样式，或者将嵌套在里面的子元素移动到父容器的外面，或者你想给元素添加一个盒子阴影和制作一个下拉菜单。在下面的演示例子中，你可以看到元素的盒子阴影被切断在父元素之内。
2、给父元素添加上 clearfix ：：before 或 clearfix ：：after 两个伪类。使用这些伪类，我们可以在浮动元素的父容器前面和后面创建隐藏元素。(推荐使用)
.clearfix：：after {
content: "."; //引号中间的空格一定要有，是指定添加的隐藏元素的内容为空的。
display: block; // 指定隐藏元素的显示模式为块状
height: 0; //为了该元素不占用空间
clear: both; //清除左右浮动
visibility: hidden; //隐藏添加的当前元素
*zoom:1; //为了兼容ie6
}
目前解决浮动最推荐的方式