对浮动的一些个人理解

最新推荐文章于 2022-07-09 19:43:34 发布

转载最新推荐文章于 2022-07-09 19:43:34 发布 · 136 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wjx91/p/6540517.html

对浮动的一些个人理解

根据张鑫旭的博客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也破坏了，于是这些元素也就没有了高度。

转载于:https://www.cnblogs.com/wjx91/p/6540517.html