HTML+CSS 轻松入门之布局模型

在网页中，元素有三种布局模型：

1、流动模型（position:static）

2、浮动模型(float:left、right)

3、层模型（position:absolute、fixed、relative）

其中比较特殊的布局方式是：

position：relative

它保留该元素在“流动模型”或者“浮动模型”所占据的空间，不改变元素的显示方式：“内联”或者“块状”。它仅告诉元素按照元素在原来的位置作相对移动。但它毕竟是层模型布局的元素，如果与其它元素重叠，它将显示在非层模型布局的元素的上方。另外设置了relative之后，元素便具有了完整的盒模型，即便是内联元素，设置高度、上下补白，上下边界也变得有效了，并且这些设置将体现在其在文档流中所占据的空间上。

流动模型

流动（Flow）是默认的网页布局模式。任何没有具体定义position:absolute;或position:fixed;属性，以及没有被定义浮动float:left;或float:right;的元素都将默认呈现流

动布局模式。

流动布局模型具有4个比较典型的特征：

1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置，不

管这个元素所包含的内容有多少，也不管我们把元素的宽度设置多窄。

2、内联元素都会在所处的包含元素内从左到右水平分布显示。有人把这种分布方式称为文本流，文本流源于文本的从左向右自然流动，本质上它与HTTP传输方式和浏览器的解析机制密切相关。超出一行后，会自动从上而下换行显示，然后继续从左到右按顺序流动，以此类推。当然，读者可以利用CSS文本属性强制改变文本流动方向。

3、相邻的两块状元素或嵌套的块状元素如果定义了上下外边距会发生重叠，重叠的结果是两者之中的最大值。针对嵌套的重叠现象，可以通过定义父元素的overflow属性值为“auto”来阻止这种重叠。

4、浮动元素不会发生外边距重叠，而浮动与块状元素接触时，通过后出现的元素来决定是否重叠。从编程的角度讲，修改已经构建好的dom树，倒不如通过决定下一个元素如何显示来的效率要高。如果浮动元素是块状元素的父元素，根据上边的规则是应该重叠的，但是浮动元素会自动计算内部的高度宽度，所以结果外边距不会发生重叠。

浮动模型

浮动是完全不同于流动的另一种布局模型，它遵循浮动规则，但仍能看到流动对它的潜在影响。任何元素在默认情况下是不能够浮动的，但都可以用CSS定义为浮动，如div、list、p、table，以及img等元素都可以被定义为浮动，事实上即使是如span、strong等这样的内联元素也可以被定义为浮动。

浮动布局模型具有下面几个特征：

1、任何定义为float的元素都会自动被设置为块状显示。这样就具有了完整的盒模型。

2、如果当我们没有指定浮动元素的宽度时，浮动元素会自动收缩到能够包含内容的宽度。

3、浮动模型不会与流动模型发生冲突。当元素定义为浮动布局时，浮动元素不会脱离正常文档流而任意的浮动，它的上边线将与未被声明为浮动时的位置一样。但是在水平方向上，它的浮向边会尽可能地靠近包含它的元素的边缘（这个边缘是指包含元素补白的内边沿）。

4、与普通元素一样，浮动元素始终位于包含元素内，不会游离于外，或破坏元素包含关系，这与层布局模型不同。

5、关于流动元素环绕问题。虽然浮动元素能够随文档流动，但浮动模型与流动模型依然存在本质区别。浮动元素的后面的内联元素都能够以流的形式环绕浮动元素左右，甚至与上面的文本流连成一体。而块状元素则不同，它会忽视所有浮动元素所占据的空间，好像这个浮动元素根本就不存在，依这种方式确定自己在流动模型中的位置。

6、关于浮动元素间并列显示问题。当两个或者两个以上的相邻元素都被定义为浮动显示时，如果存在足够的空间容纳它们，浮动元素之间可以并列显示。它们的上边线是在同一水平线上的。如果没有足够的空间，那么后面的浮动元素将会下移到能够容纳它的地方，这个向下移动的元素有可能产生一个单独的浮动。很多设计师喜欢使用浮动模型来布局网页，原因就在于它能够突破流动模型布局中块状元素不能并列显示的问题。

7、浮动元素在浮动时会尽可能靠近上一个浮动素，进而把其它非浮动元素挤在一边。如果挤不动(如：块状元素，或者没有足够的空间在同一行显示内联元素和这个浮动元素)

其他元素它就换行并紧邻着显示在上个元素之后。

8、总结：浮动元素仍然处于文档流之中，以文档流元素为自己定位，但是它不占用文档流的空间。

浮动清除

只有块状元素可以定义清除属性，对内联元素定义清除无效。一个块状元素设置"clear:both"后，会保证当其被解析时左右不会出现浮动元素。但如

果它是浮动元素（设置了float属性），后面的浮动元素仍有可能浮动在其左右。当一个浮动元素定义了clear属性，它不会对前面的任何对象产生影响，也不会对后面的对象形成影响，只会影响自己的布局位置。这里的影响是指不会主动改变别的对象的位置。

注：个人感觉，这个属性中文名翻译为“干净”更好，他表示当前元素在其被解析时

保证哪边是干净的，没有漂浮物的。

浮动嵌套

浮动元素可以相互嵌套，嵌套规律与流动元素嵌套相同。浮动的包含元素总会自动调整自身高度和宽度以实现对浮动子元素的包含。定义了“float”的元素会自动计算元素内浮动元素所占的宽高，使之与其内的内容适应。没有定义该属性则不能自动计算宽高，导致父元素宽高显示不正常。也可以通过定义父元素的overflow属性为“auto”来自动扩展元素的宽高。

浮动与流动嵌套

单纯的流动元素之间或单纯的浮动元素之间相互嵌套一般都比较好处理，但是如果把浮动元素嵌入流动元素之内，则显示的效果就会很复杂，此时包含元素将根据自身属性进行显示，不再受子浮动元素的影响，也就是说父元素不能够自适应子浮动元素的高度。浮动元素的起点将由它在包含元素内的位置来决定，但浮动元素将在包含元素的上面展开，这种情况将与绝对定位的元素有点类似。

层模型

层布局模型源于图形图像编辑器中非常流行的图层编辑功能，图层能够精确操作和编辑图像而广受平面设计师的欢迎，但在网页设计领域，由于网页大小的活动性，层布

局没能受到热捧。为了支持层布局模型，CSS定义了一组定位（positioning）属性。元素定位的设计思路非常简单，它允许用户精确定义网页元素的相对位置，这里的相对可以相对元素原来显示的位置，或者是相对最近的包含块元素，或者是相对浏览器窗口。

定位类型

1.static：表示不定位，元素遵循HTML默认的流动模型，如果未显式声明元素的定位类型，则默认为该值。

2.absolute：表示绝对定位，将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即根据浏览器窗口，而其层叠顺序则通过z-index属性来定义。

3.fixed：表示固定定位，与absolute定位类型类似，但它的包含块是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与backgroundattachment:fixed;属性功能相同。

4.relative：表示相对定位，它通过left、right、top、bottom属性确定元素在正常文档流（或者浮动模型）中的偏移位置。相对定位完成的过程是首先按static(float)

方式生成一个元素，然后移动这个元素，移动方向和幅度由left、right、top、bottom属性确定，元素的形状和偏移前的位置保留不动