Head First HTML与CSS

第十一章 布局与定位

CSS——掌控页面的表现

流（Flow）

流实际上是浏览器在页面上摆放HTML元素所用的方法。浏览器从HTML文件最上面开始，从上到下沿着元素流逐个显示所遇到的各个元素。

它会在每个块元素之间加一个换行，所以首先会显示文档中的第一个元素，然后是一个换行，然后是第二个元素，继续换行，从文件最上面到文件末尾逐个显示。这就是流。

内联元素在块元素内部，水平方向上会相互挨着，总体上会从左上方流向右下方。内容会从左向右流，直到没有更多空间，换到下一行。

当浏览器并排放置两个内联元素时，二者的外边距会相加，间距为外边距之和。

当浏览器上下放置两个块元素时，二者的外边距会折叠（即大的覆盖小的），间距为二者中较大的外边距。如果一个元素嵌套在另一个元素中，二者的外边距也会折叠，如果外层元素有边框则不会折叠。

内联元素也可以有外边距，但通常不设置。图像例外。

浏览器会确定一行能流入多少文本，然后把这部分文本当作一个内联元素。其余文本流到下一行。

float属性

float属性有两个值：right和left。

float属性首先尽可能地向左或向右（根据float的值）浮动一个元素。然后它下面的所有内容会绕流这个元素。

先将#elixirs div元素移到页面开始的图片下，然后增加float属性：

float:right;

效果如下：

初始 上移div 增加float属性 正常比例显示

如何浮动元素

对于所有要浮动的元素都有一个要求：它必须有一个宽度。因此没有宽度的元素应当设置width属性。

原理流程如下：首先，浏览器从上往下将元素流入页面，遇到浮动段落时，将其放在最右（）左侧，并从正常流动中删除，就好像浮在页面上一样。由于该段落已经从正常流动中删除，因此其他块元素会在其侧面填充，考虑该浮动段落的周界，围绕着浮动元素分布。

---

Head first HTML与CSS 483/710

欠账3