常規流( Normal flow )

之稱之為常規流，是因為這是相對于后面的浮動和絕對定位的一個概念，浮動和絕對定位元素都脫離了當前的常規流。

在 CSS2.1中，常規流包括塊框( block boxes )的塊格式化( block formatting )， 行內框( inline boxes )的行內格式化( inline formatting )，塊框或行內框的相對定位，以及插入框的定位。

在 CSS 中，元素定義的環境有兩種，一種是塊格式化上下文( Block formatting context )，另一種是行內格式化上下文( Inline formatting context )。 這兩種上下文定義了在 CSS 中元素所處的環境，格式化則表明了在這個環境中，元素處于此環境中應當被初始化，即在常規流中的框，都屬于一個格式化的上下文中等。

塊格式化上下文( block formatting contexts)

Block Formatting Contexts(塊格式化上下文)是W3C CSS 2.1 規范中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。

在創建了 Block Formatting Contexts 的元素中，其子元素會一個接一個地放置。垂直方向上他們的起點是一個包含塊的頂部，兩個相鄰的元素之間的垂直距離取決于 ‘margin’ 特性。在 Block Formatting Contexts 中相鄰的塊級元素的垂直外邊距會折疊(collapse)。

在 Block Formatting Contexts 中，每一個元素左外邊與包含塊的左邊相接觸(對于從右到左的格式化，右外邊接觸右邊)， 即使存在浮動也是如此(盡管一個元素的內容區域會由于浮動而壓縮)，除非這個元素也創建了一個新的 Block Formatting Contexts 。

這是W3C關于BFC的一個解釋，通俗一點解釋就是：在常規流( Normal flow )

塊格式化上下文( block formatting contexts)觸發方式，在創建了塊格式化上下文的元素中的子元素都會按照塊格式化上下文提供的規矩來排列自己，除非自己也創建一個新的塊格式化上下文

觸發方式

float:left|right ,除了none

overflow:hidden|auto|scroll(也就是除了overflow:visible;)

position: absolute|fixed (IE6沒有塊狀格式化上下文的概念，不過有類似的layout的，所以不用擔心IE6不支持fixed而不能創建塊狀格式化上下文)

display:inline-block|table-cell|table

表格的單元格(display: table-cells，TD、TH)

表格的標題(display: table-captions，CAPTION)

表格元素創建的 “匿名框” 。

注意，是這些元素創建了塊格式化上下文，它們本身不是塊格式化上下文。

Block Formatting Context有什么用

產生了Block Formatting Context的盒模型會有三個性質，這三個性質我們可能都有一些了解，但對于內部原理不是很明白。努力弄懂這一核心原理的話，能幫助我們更好的掌握一些IE6/7的hasLayout bug。

比如我們知道浮動元素可以包含另一個浮動元素，讓兒子浮動元素不會跟外部元素有相互的影響。其根本原理因為浮動的父元素生成了Block Formatting Context。

Block Formatting Context會阻止邊距折疊

代碼

沒創建BLK不同流div創建BLK，IE通過類似BLK的layout，IE通過zoom:1觸發layout

DEMO

沒創建BLK不同流div

創建BLK，IE通過類似BLK的layout，IE通過zoom:1觸發layout

Block Formatting Context會阻止邊距折疊實例以及DEMO

Block Formatting Context可以包含內部元素的浮動

代碼

沒創建BLK不同流div創建BLK，IE通過類似BLK的layout，IE通過zoom:1觸發layout

DEMO

沒創建BLK不同流div

創建BLK，IE通過類似BLK的layout，IE通過zoom:1觸發layout

Block Formatting Context可以包含內部元素的浮動實例以及代碼

div同樣都是設置了背景色為藍色，但前一個div就沒有顯示出來，因為內部的浮動元素脫離了文檔流，不受父元素的控制，那么父元素在文檔流中是一個空標簽，沒有高度和寬度，也就不顯示任何顏色；而第二個div由于生成了Block Formatting Context(通過overflow:hidden;觸發)，會包容住里面的浮動元素，這樣容器才會有自己的寬度和高度(被子元素撐開)，這樣就會顯示出顏色；當然也可以通過其他觸發Formatting Context，譬如通過float:left;觸發。

Block Formatting Context可以阻止元素覆蓋浮動盒模型

這是非常給力的一個特性。規范說：Block Formatting Context的盒模型border外延(而不是margin外延，也就是說無視margin設置)不會覆蓋周圍的浮動盒模型margin外延。這就是說瀏覽器應該默默創建一個特定邊距來阻止Block Formatting Context的盒模型border外延覆蓋周圍的浮動盒模型。出于此種原因，接在浮動元素后面的Block Formatting Context上設置的負邊距應該是無效的(應該被瀏覽器默默創建的特定邊距覆蓋)，不過對此-webkit瀏覽器和IE6會有不正確的理解，試試用不同的瀏覽器看看這個頁面，webkit和IE6理解是不正確的，其余是正確的。

代碼

leftside

rightside

middele

DEMo

leftside

rightside

middele

Block Formatting Context可以阻止元素覆蓋浮動盒模型代碼以及DEMO

外延上，那么如果希望上面的Block Formatting Context(也就是有border的那個盒子)左右兩邊出現邊距，那么只有兩種方法：

給Block Formatting Context設置一個超過兩邊浮動盒模型寬度的margin值，比如margin:0 220px;

在浮動元素上設置20px margin

ps.前一種方法在Chrome和IE6下跟別的瀏覽器表現不一。后一種方法在IE6/7下會出現雙邊距bug。

ps.border外延跟一個盒模型有沒有設置border屬性完全沒有關系，只是從盒模型上無視margin而已。

ps.在IE6下當中會出現3像素bug

行內格式化( inline formatting )

相對于塊格式化上下文，在行內格式化上下文中，框( boxes )一個接一個地水平排列，起點是包含塊的頂部。 水平方向上的 margin，border 和 padding 在框之間得到保留。 框在垂直方向上可以以不同的方式對齊：它們的頂部或底部對齊，或根據其中文字的基線對齊。 包含那些框的長方形區域，會形成一行，叫做行框。

實例代碼

TEXT1

text in span

great1

thx a lot

bee

give me 5!

Aloha!

DEMO

TEXT1text in spangreat1thx a lotbeegive me 5!Aloha!

行框的寬度由它的子孫集和其中的浮動元素決定。高度的確定由行高度計算規則決定。

行框的范圍

通常，行框的左邊接觸到其包含塊的左邊，右邊接觸到其包含塊的右邊。然而，浮動元素可能會處于包含塊1邊緣和行框邊緣之間。 總之，盡管在相同的行內格式化上下文中的行框通常擁有相同的寬度(包含塊的寬度)，它們可能會因浮動元素縮短了可用寬度， 而在寬度上發生變化。同一行內格式化上下文中的行框通常高度不一樣(如，一行包含了一個高的圖形，而其它行只包含文本)。

實例代碼

FLOAT

great1

good

DEMO

FLOAT

great1

good

行內框可能被分割

如果幾個行內框在水平方向無法放入一個行框內，它們可以分配在兩個或多個垂直堆疊的行框中。因此，一個段落就是行框在垂直方向上的堆疊。 行框在堆疊時沒有垂直方向上的分割且永不重疊。

如果一個行內框超出包含它的行框的寬度，它會被分割成幾個框，并且這些框會被分布到幾個行框內。如果一個行框不能被分割(例如， 行內框只包含單個字符，或者語言特殊的斷字規則不允許在行內框里換行，或者行內框受到帶有 “nowrap” 或 “pre” 值的 ‘white-space’ 特性的影響)，這時，行內框會溢出行框。

如果一個行內框被分割，margin、padding 和 border 在所有分割處沒有視覺效果。

行內框還可能由于雙向文本處理(bidirectional text processing)而在同一個行框內被分割為好幾個框。

示例代碼：

text in span

great1

DEMO

text in span

great1

由于行框寬度限制(100px)，第一個 SPAN 元素形成的行內框，被分割成了 3 段。

行內框在行框中垂直方向上的對齊

行框的高度總是足夠容納所包含的所有框。不過，它可能高于它包含的最高的框(例如，框對齊會引起基線對齊)。 當一個框 B 的高度小于包含它的行框的高度時，B 在行框中垂直方向上的對齊決定于 ‘vertical-align’ 特性。 ‘vertical-align’ 默認值為基線( ‘baseline’ )對齊。

示例代碼：

text in span

great1

DEMO

text in span

great1

行內框在行框中垂直方向上的對齊實例以及DEMO

DEMO上我們看到 em 所形成的行內框內容的頂端與行中最高元素的頂外邊界對齊。

行內框在行框中水平方向上的對齊

當一行中行內框寬度的總和小于包含它們的行框的寬，它們在水平方向上的對齊，取決于 ‘text-align’ 特性。 如果其值是 ‘justify’，用戶端也可以拉伸行內框(除了 ‘inline-table’ 和 ‘inline-block’ 框)中的空間和文字 。

示例代碼：

FLOAT

great1

good

DEMO

FLOAT

great1

good

行內框在行框中水平方向上的對齊實例以及DEMO

DEMO上我們看到浮動元素縮短了當前的行框，并且行內框在對齊的時候是根據行框的寬度，居中對齊。

塊框( block boxes )和行內框( inline boxes )只是三種定位體系定位之一的常規流( Normal flow )，而塊級格式上下文(Block Formatting Context)和 行內格式上下文( inline formatting )其實他們元素創建的格式上下文，他們本身其實并不是上下文，是對內框的排列的一種約束。

總結

以上是生活随笔為你收集整理的html5边框顶格,CSS 三种定位方式以及格式化上下文详解 》 html5jscss的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。