对浮动的一些个人理解

对浮动的一些个人理解

根据张鑫旭的博客CSS float浮动的深入研究、详解及拓展系列,浮动就是个带有方位的display:inline-block属性。根据例子来理解:
关于line boxes模型:

<style>
     .left{
        width: 200px;
        height: 100px;
        background-color: red;
        float: left;
     }
</style>
<html>
<body>
<div class="left">left</div>
<p>isplay:inline-block CSS届最伟大的声明之一,但是,在这里,就有些捉襟见肘了。display:inline-block会让元素尺寸包裹收缩,完全就不是我们想要的block水平的流动特性。唉,只能是一声叹气一枪毙掉的命!然而,峰回路转,世事难料。大家应该知道,IE6/IE7浏览器下,block水平的元素设置display:inline-block元素还是block水平,也就是还是会自适应容器的可用宽度显示。于是,我们就阴差阳错得到一个比overflow:hidden更牛逼的声明,即BFC特性加身,又流体特性保留。</p>
</body>
</html>

元素设置浮动属性后,该元素呈现为inline对象(但是对象的内容作为block对象呈现),那么如果该元素之后的元素为行内元素<p>,则会和这个浮动元素展现在同一行。这时,.left元素设置浮动后,破坏了inline boxes,由于浮动元素没有了inline boxes,就没有了inline boxes高度(这里的高度不是元素的box模型中的高度,详细参考注①),所以其他inline boxes元素涌上来,在同一水平上,但是浮动元素有宽度以及自身高度,故在呈现上,其他inline boxes元素重新整合,环绕浮动元素排列。
但如果浮动元素后是块级元素,块级元素不会与inline boxes元素同一行,会另起一行,但因为浮动元素没有了inline boxes高度,所以块级元素会从浮动元素开始位置插入(这个就是经常出现的需要清除浮动的问题),导致浮动元素覆盖该块级元素。但是如果块级元素中有文字内容会其他行内子元素,则还会环绕浮动元素,只有块级子元素会被覆盖(此处不解?)。

浮动产生的影响差不多先这样。清除浮动,也就是解决浮动元素高度塌陷的问题。

注①:在目前的CSS的世界中,所有的高度都是有两个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也破坏了,于是这些元素也就没有了高度。

posted @ 2017-03-13 00:19  向量的方向  阅读(242)  评论(0编辑  收藏  举报