关于float的二三事（一）

这篇是看了一些大神的博客之后根据自己的需要做的总结，仅为前端小白的学习笔记总结。
如果想要了解更详细的原理什么的，建议看http://www.zhangxinxu.com/wordpress/?p=594，里面的解释很棒！
可以再搭配着一些CSS文档看看。
有不对的地方欢迎指出，我还需要更多的学习！

一、浮动的包裹性和破坏性

在张鑫旭的关于浮动的博客里，他提到了“撇开浮动的“破坏性”，浮动就是个带方位的display:inline-box属性”。

display:inline-box——对象呈递为内联对象——成为inline-box

    ——对象的内容作为块对象呈递——可设置宽、高、margin等

包裹性：所产生的的结果就是使元素转为了line box模型中的inline box

破坏性：破坏的正是inline box，破坏了高度，产生高度塌陷问题

二、解决高度塌陷的问题

高度塌陷的产生：元素具有浮动属性--破坏inline box——破坏line box高度——没有高度——塌陷

塌陷：当标签里的元素只有样子没有实际高度时会塌陷（不只浮动能产生塌陷）

高度塌陷的解决：清除浮动

1°投机取巧法

直接一个

，将其放在父标签的最后，当作其最后一个子标签。

2°overflow+zoom方法

.float{overflow:hidden;zoom:1}    .float为父标签的类。

但是如果内部元素想来个负margin定位或负的绝对定位，便会直接被截掉了。

3°after+zoom方法:推荐使用

所谓after，就是指标签的最后一个子元素的后面。于是呢，我们可以用CSS代码生成一个具有clear属性的元素，其中的关键样式就是content了

.float{zoom:1}

.float:after{

display:block;

content:"clear";

clear:both;

line-height:0

visibility:hidden

}