HTML中浮动的方法,页面中的浮动

float的意义：实现文字环绕。

浮动的本质：包裹与破坏

1.float浮动的包裹性，抛开浮动的破坏性，浮动就是个带有方位的display:inline-block属性。

display:inline-block的作用就是包裹，而浮动也有类似的效果。

2.float:left;方法与inline-block方法唯一不同的地方就是float:right；某种意义上display:inline-block属性的作用和float：left是一样的。然而float不能等同于display:inline-block；其中的之一的原因是浮动的方向性，display:inline-block;仅仅一个水平排列方向。

就是从左往右等同于float:left；，而float的可用左右排列。

3.浮动的“破坏性”，浮动是css属性中的破坏之王。要理解浮动的破坏性要从最原始的意义入手。就是？】“只是用来让文字环绕图片而已。”

结论：文字之所以会环绕float属性的图片是因为浮动破坏了正常的line boxes

css世界中，所有的高度都有两个css模型产生，一个是box盒状模型，对应css为height+padding+margin。另外一个是line box模型，对应样式为line-height。

float破坏inline-block演示

解决高度塌陷的问题 – 清除浮动

overflow + zoom方法

.fix{overflow:hidden; zoom:1;}

此方法优点在于代码简洁，涵盖所有浏览器，可谓不错的选择啊。不过也是有问题的，就是这个overflow:hidden是个小炸蛋，要是里面的元素要是想来个margin负值定位或是负的绝对定位，岂不是直接被裁掉了，所以此方法是有不小的局限性的。一般不用这个方法，只是有时候顺便去除浮动时用用。

after + zoom方法

先来简单讲讲after，可以用CSS代码生成一个具有clear属性的元素，其中的关键样式就是content了。

.fix{zoom:1;}

.fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}

这里的line-height:0写成height:0也是可以的。此方法可以说是综合起来最好的方法了，我都是用这个样式清除浮动的，不会影响任何其他样式，通用性强，覆盖面广，很推荐。