从块级元素和行内元素的分析到bfc的布局理解

块级元素：块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。通俗的讲：一个div，它的height:20px; width:20px;,div的大小就是这个高乘以宽的区域。

行内元素：一个行内元素只占据它对应标签的边框所包含的空间。eg: <span>1</span>:行内元素占据的是1这个内容区的空间。

块级元素与行内元素的区别

块级元素，可以设置宽高（width, height）,可以设置全部方向的margin，padding值（四个方向都可以），会新起一行（即两个块级元素在一起会，变成两行，与块级元素的宽度无关，即使父级div的宽度为100px，子级两个div的宽度只有10px,两个子级div也会上下排列，除非设置了float.）。

从块级元素和行内元素的分析到bfc的布局理解-LMLPHP

第二个div另起了一行。

块级元素具体有：

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

HTML5：header、section、article、footer等等

行内元素：行内元素不能设置width,height,还有不能试试margin的top和bottom但是可以设置margin的left和right，可以设置padding的四个方向。行内元素都是在同一行的。但是有一些特殊的行内元素如input，img等他们是替换元素：<img>、<input>、<textarea>、<select>、<object>，他们可以设置宽高。

下面的元素都是行内元素：

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>

菜菜行进中

从块级元素和行内元素的分析到bfc的布局理解