什么是浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

我们来看几个例子

请看下图：当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘

请看下图： 当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

请看下图：如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”

实现浮动

在 CSS 中，我们通过 float 属性实现元素的浮动。float 属性定义元素在哪个方向浮动。其可能值有：

left 元素向左浮动

right 元素向右浮动

none 默认值，元素不浮动

inherit 规定从父元素继承float属性的值。

清除浮动

我们先来了解一下CSS标准文档流，说白了就是一个“默认”状态。元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

但是我们在布局的时候，由于某些原因(当使用浮动、绝对定位、固定定位)会使文档脱离标准流，其中浮动会影响标准流的排列。

我们浮动的目的，就是可以把多个块级元素放到想要的一行上。

清除浮动的原因：因为浮动会影响标准流，比如浮动造成的父级高度塌陷问题

清除浮动的方法

1、使用伪元素来清除浮动(:after,注意：作用于浮动元素的父亲)

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE专有属性)可解决ie6,ie7浮动问题

优点：浏览器支持好，不容易出现怪问题(目前：大型网站都有使用，如：腾迅，网易，新浪等等)

缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持

建议：推荐使用，建议定义公共类，以减少CSS代码

.clearfix:after{

content:""; /*设置内容为空*/

height:0; /*高度为0*/

line-height:0; /*行高为0*/

display:block; /*将文本转为块级元素*/

visibility:hidden; /*将元素隐藏*/

clear:both; /*清除浮动*/

}

.clearfix{

zoom:1; /*为了兼容IE*/

}

2、添加新的元素对其应用 clear:both

原理：添加一个空元素，利用css提供的clear:both清除浮动，让父级div能自动获取到高度

优点：简单，代码少，浏览器支持好，不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空页面标签，造成结构的混乱。

建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

//对添加的元素使用 clear:both

.clear{clear:both;}

3、父级div定义overflow:hidden

原理：使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点：简单，代码少，浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用

.over-flow{ overflow:hidden; zoom: 1;}/*zoom1; 是在处理兼容性问题*/

4、父级div定义overflow:auto

原理：使用overflow:auto时，浏览器会自动检查浮动区域的高度

优点：简单，代码少，浏览器支持好

缺点：内部宽高超过父级div时，会出现滚动条。

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

.over-flow{ overflow:auto; zoom: 1;}/*zoom1; 是在处理兼容性问题*/

5、父级定义高度height

只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题不推荐使用，只建议高度固定的布局时使用。

6、父级display设置成table

原理是将div属性变成表格，可能会产生新的未知问题，不推荐使用，只作了解。