浮动模型详解

 写了这么久的CSS，觉得自己还没有很深入地了解CSS的一些概念。

特别是浮动模型，我一直期待进入一种境界，看一个网页布局，立刻能想象出这个布局的Div结构，以及在各种浏览器中的实现。

单纯从做项目中积累经验还不是很快捷的方式吧，毕竟很多情况由于时间紧迫，遇到很多问题我都是采取回避的方式而不是刨根问底。所以，我觉得最好的学习方式还是自己去动手去试试，发现问题，围绕问题去寻找解决办法。

这篇学习笔记写一下昨天的一个关于浮动的学习成果。

 

浮动模型

为什么要使用浮动模型？在普通流中，有两种主要的呈现模式：block和inline，block会占据整行。inline是内联对象，没有宽高概念。如果只使用普通流的框模型，因为一个框会占据整行，所有只能有一列。要灵活布局，必须配合上浮动模型或者定位。浮动模型的基本概念在很多书上都写了很清楚，特别是《精通CSS》里面，介绍得比较准确和全面了，下面我整体总结一下。

0.本文结构

1. 浮动元素和浮动元素
2. 普通元素和浮动元素
3. 浮动元素和普通元素

 

1.浮动元素与浮动元素

假设有两个浮动元素，他们都会跟随自己的方向浮动，第二个会争取和第一个在同一行里面，如果挤不下，会流到第二行。值得注意的是，第二个元素永远不会高于第一个元素。例如，有三个黄、橙、红顺序的DIV：

我左浮动

我左浮动，我争取跟阿黄同一行，但是不够空间，所以被挤下来了。

我右浮动，虽然阿黄上面有空间，但是我是跟着阿橙的，我只会争取跟阿橙同一行。

 看它们的自白，不解释。

 

2.普通元素和浮动元素

 如果浮动元素跟在普通元素的后面（这里的跟是指html顺序），浮动元素会在这个普通元素以下呈现。

我没有浮动

我左浮动，因为阿黄占据一行了，就算上面可以容纳我，我也只能从这里开始。

我右浮动，我心依旧，怎么阿橙瘦了？

 

3.浮动元素和普通元素

 这部分是重点了，当一个普通元素跟在一个浮动元素后面，这个普通元素会无视浮动存在，显示在与浮动元素开始的位置，浮动元素显示在普通元素之上。

我左浮动，我变透明了？！

我不浮动，我无视阿黄，从开始处显示，而且在阿黄的下面,文字内容环绕阿黄。怎么？！你看到我在阿黄旁边？！活该，谁叫你用ie6，ie7！

 

本例在ie6，ie7中表现与众不同，对此我翻阅了《CSS网站布局实录》以及《精通CSS》，发现《布局实录》中把这种情况作为一种标准来介绍浮动，而事实上这是ie6，ie7的浮动bug。而《精通CSS》只介绍了标准显示的情况，就是Chrome的显示情况。然后我继续Baidu&Google，网上提到这个问题的貌似也不多，最后，我被引导到去看《On having layout》这篇经典。然后在里面找到了解释：ie出现的很多bug都是因为微软的一个独特的haslayout属性引起的，这个属性表示这个元素是否“已经布局”，这个属性用户不可见，但是可以由很多CSS属性触发，常见的就是width，height，zoom等。里面介绍了很多因为ie这个“过人之处”带来的很多bug，其中包括我们这个问题：

When a block follows a floated element, it should — as a block — ignore the float, but its contents should be displaced by the float: the text in a block-level element next to a left-floated element should flow to the right of the float, and then (if it is longer than the float) continue below the floated element. But if the block has “layout”, say, a width is set for some reasons, then the whole element is displaced by the float, as if it were a float itself, and so the text content does not wrap around the float anymore (it remains at its right, rectangularly shaped.)

简单翻译一下：当一个块元素跟随这一个浮动元素，它会忽略浮动，但是它里面的内容会围绕这浮动元素，因为块元素是在左浮动元素的旁边，所以里面的文本会流到浮动元素的右边，如果文本比较长的话，它会继续流到浮动元素的下面。但是如果这个块元素一旦“layout”了，例如说，设定了宽度，那么它整个元素就会围绕这个浮动元素，就好像它本身也是浮动元素那样，所以它里面的文本不在围绕这个浮动元素了。

按照上面情况说，我们例子的情况是因为我们设定了尺寸所引起的。所以，下面看看不设宽高的情况：

我左浮动，我变透明了？！

我不浮动，我没有设置宽和高，我可以在ie6，7上面显示正常了！

 下面是这个效果在ie7上面的显示截图：

正如文中所说，当没有layout的时候，ie6，ie7可以正常呈现。当设定了layout之后，ie6，7把这个普通块元素也当作文本处理，整个块元素围绕这浮动元素，所以会出现上面的问题。其实也可以从另一个角度来证明这个说法，看回到上面ie6，ie7，chorme显示情况的那张图，可以看到在ie6上面出现了3px bug，而这3px不是出现在文本和边框之间，而是出现在浮动元素和块元素之间。

 

参考资料

The IE Float Model Problem

On having layout

The IE6 Three Pixel Text-Jog