css float浮动深入详解

浮动的原始意义只是用来让文字环绕图片

浮动的 “包裹性”

不管浮动的破坏性，浮动就是一个带有方位的display: inline-block;属性

<a href="" class="btn1"><cite>inline-block方法</cite></a>
.btn1 { display: inline-block; background: red; color: #000; }
.btn1 cite { display: block; line-height: 26px;}

< a href="" class="btn1"><cite>flont方法</cite></a>
.btn { float: left;  background: red; color: #000; }
.btn1 cite { display: block; line-height: 26px; }

以上这两种方法是等价的

浮动的 “破坏性”

有两个CSS模型产生的，

• 一个是box盒状模型，对应CSS为”height+padding+margin”，

• 另外一个是line box模型，对应样式为”line-height”。
• 前者的height属性分为明显的height值和隐藏的height值，所谓隐藏的height值是指图片的高度，一旦载入一张图片，其内在的height值就会起作用，即使您看不到”height”这个词。
• 而后者针对于文字等这类inline boxes的元素（图片也属于inline boxes，但其height比line-height作用更凶猛，故其inline boxes高度等于其自身高度，对line-height无反应），inline boxes的高度直接受line-height控制（改变line-height文字拉开或重叠就是这个原因），而真正的高度表现则是由每行众多的inline boxes组成的line boxes（等于内部最高的inline box的高度），而这些line boxes的高度垂直堆叠形成了containing box的高度，也就是我们见到的div或是p标签之类的高度了。所以，对于line box模型的元素而言，没有inline boxes，就没有高度了，而浮动却恰恰做了这么龌龊的事情，其直接将元素的inline boxes也破坏了，于是这些元素也就没有了高度。

具体的资料 请点击下面的链接

css-float浮动的深入研究、详解及拓展一

css-float浮动的深入研究、详解及拓展二