我們普遍認為，普通流中塊級元素的布局比較易**，水平方向的表現於垂直方向上還要更容易，通常依據父元素的寬度就很容易確定，但也有讓人驚訝的部分，比如元素在水平方向的auto值會有何影響，子元素為什麼有時候在水平方向上會超出父元素的內容區，要清楚這些原因就要了解元素在水平方向的格式化原理。
水平格式化往往沒有想象的那樣簡單，其中部分原因是width影響的是內容區的寬度，而非可見框的寬度（可見框通常包括，border,padding和width）。 水平方向的格式化有7大屬性，包括：margin-left,border-left,padding-left,width,margin-right,border-right,padding-right。在這7個屬性中，有3個屬性可以設定為auto,分別是margin-left,margin-right和width,其餘屬性必須設定為特定值，預設為0。
在普通流中，這七個屬性的值加在一起，必定等於元素包含塊的寬度，無論屬性中是否含有auto值。鑑於塊級元素的父元素通常是塊級元素，元素包含塊的寬度通常是父元素的witch值，也就有了我們所說的水平方向的寬度依賴於父元素。
前面也說過，七個屬性中只有margin-left,margin-right和width三個屬性可以為auto,同樣的，不管哪些屬性值為auto,都會讓七個值得和為父元素的width值，使元素的矩形框填充父元素的內容區。
1. 當任意乙個值為auto時
當margin-right或margin-right，width中的其中乙個為auto時，而另外的屬性均有指定值時，會依據屬性值的和相加等於父元素的width值得方式來計算該auto值，以對子元素的矩形框寬度做補充，使其等於父元素的width值。考慮一下格式
div.outer
div.inner
列出表示式如下:
margin-left+3px+30px+30px+200px+3px+10px=300px;
鑑於只有margin-left設定的值為auto，可以計算得到，margin-left的值應為24px;
樣式表現如下圖:
圖一2. 當margin-left和margin-right為auto時
當兩個margin均為auto時，為了滿足矩形框的寬度等於包含框的寬度，也會做出一些補充適配，此時他們會被設定為同樣的長度，考慮如下格式:
div.outer
div.inner列出表示式如下:
margin-left+3px+30px+30px+200px+3px+margin-right=300px;
鑑於margin-left和margin-right設定的值均為auto，可以計算得到，margin-left的值應為17px;
樣式表現如下圖：
圖二 可以看到，此時margin-left,和margin-right會被設定為同樣的長度，使得該元素在其父元素中居中,可以說設定左右兩側的margin為auto，是使得塊級元素水平居中的一種正確方法。
3. 當width和margin中的乙個為auto時
當width和margin中的乙個為auto時，為了正確的對其值做出補充使得總和等於包含框width值，會將設定為auto的margin值設定為0，相當於僅剩width乙個auto值，再根據表示式將width值設定為所需的值，使得元素完全填充其包含塊。
4.當margin-right,width,margin-left三個均為auto時
當著三個均為auto時，可以預見，會把margin-left和margin-right都設定為0，再講width的值設定為所需的值，使其填充包含塊。
這是最簡單的一種情況了，鑑於七個水平屬性相加的和必須等於父元素的寬度值。
BFC 塊級元素格式化上下文
block formatting contexts 塊級元素格式化上下文 塊級元素如何對它的內容 子元素 也是乙個塊元素 進行布局，以及與其它元素 與內容同級別 的關係和相互作用 普通文件流的布局規則 1 浮動的元素是不會被父級計算高度 2 非浮動元素會覆蓋浮動元素的位置 3 margin會傳遞給父...
塊元素和行內元素 文字格式化標籤
在html頁面中建立一條水平線。可以在視覺上將文件分隔成各個部分。1.align 水平對齊方式，預設居中 2.width 水平線的長度，可取畫素 px 和百分比 3.size 水平線的高度 4.color 顏色 示例 使水平線在頁面中間顯示，它的寬度為頁面的50 hr align center wi...
行內元素和塊級元素的垂直居中，水平居中
一 行內元素 1 行內元素的水平居中 給父級元素使用屬性text align center 2 行內元素的垂直居中 給父級元素使用屬性line hight 父元素盒子的高度 二 塊級元素 1 塊級元素的水平居中 給子級元素使用屬性margin 0 auto 2 行內元素的水平垂直居中，有四種方法 h...