從塊級元素和行內元素的分析到bfc的佈局理解

塊級元素：塊級元素佔據其父元素（容器）的整個空間，所以建立了一個「塊」。通俗的講：一個div，它的height:20px; width:20px;,div的大小就是這個高乘以寬的區域。css

行內元素：一個行內元素只佔據它對應標籤的邊框所包含的空間。eg: <span>1</span>:行內元素佔據的是1這個內容區的空間。html

塊級元素與行內元素的區別佈局

塊級元素，能夠設置寬高（width, height）,能夠設置所有方向的margin，padding值（四個方向均可以），會新起一行（即兩個塊級元素在一塊兒會，變成兩行，與塊級元素的寬度無關，即便父級div的寬度爲100px，子級兩個div的寬度只有10px,兩個子級div也會上下排列，除非設置了float.）。spa

第二個div另起了一行。3d

塊級元素具體有：code

div、p、h1-h六、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockquote、address、table、menu、preorm

HTML5：header、section、article、footer等等htm

行內元素：行內元素不能設置width,height,還有不能試試margin的top和bottom可是能夠設置margin的left和right，能夠設置padding的四個方向。行內元素都是在同一行的。可是有一些特殊的行內元素如input，img等他們是替換元素：<img>、<input>、<textarea>、<select>、<object>，他們能夠設置寬高。blog

下面的元素都是行內元素：ip

b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea

BFC:塊級格式化：是佈局過程當中生成塊級盒子的區域，也是浮動元素與其餘元素的交互限定區域.（通俗講是實驗兩欄佈局，一欄固定，一欄自適應）還有三欄佈局也是一樣的原理，下面代碼實現的是兩欄佈局。

注意：

塊格式化上下文包含建立它的元素內部的全部內容.

塊格式化上下文對浮動定位（參見 float）與清除浮動（參見 clear）都很重要。浮動定位和清除浮動時只會應用於同一個BFC內的元素。浮動不會影響其它BFC中元素的佈局，而清除浮動只能清除同一BFC中在它前面的元素的浮動。外邊距摺疊（Margin collapsing）也只會發生在屬於同一BFC的塊級元素之間。

實現代碼以下：

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div class="container"> <div class="left"></div> <div class="main"></div> </div>  </body> <style type="text/css"> .container{ width: 100%; height:300px; padding-left:200px; } .left{ left:0; width:200px; background: red; height: 100px; margin-left:-200px; float: left; } .main { width:100%; padding-left: 200px; height:100px; background: blue; float: left; } /*.dd{ border:1px solid #18E; margin: 10px; height: 200px; width:300px; padding:20px; }*/ </style> </html>