从块级元素和行内元素的分析到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>