CSS文档流与块级元素（block）、内联元素（inline），之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆CSS布局的理论都 变得易于理解,并且体会到CSS这套设计的合理性所在. 于是我根据猜测,再加实验,得出一下说法.如有错误,纯属正常.

文档流

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.

每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动.

内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素.

有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 但是在IE中浮动元素也存在于文档流中(还让我觉得这样很合理&gt;<).

浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。

浮动概念让人迷惑根源在于浏览器对理论的解读造成的。只能说很多人以IE做标准，其实它不是。

基于文档流, 我们可以很容易理解以下的定位模式:

• 相对定位,
  即相对于元素在文档流中位置进行偏移. 但保留原占位.
• 绝对定位,
  即完全脱离文档流, 相对于position属性非static值的最近父级元素进行偏移
• 固定定位,
  即完全脱离文档流, 相对于视区进行偏移.

接下来还有几个问题我搞不明白的

1. 作为三大基本元素之一的内联元素, 它跟块级元素的主要区别在哪?
2. Clear属性取right值时怎么理解? 貌似实验情况总跟理论不符.

出处：相关论坛
责任编辑：bluehearts

上一页 下一页 CSS文档流与块级元素和内联元素 [2]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。