神奇的盒模型（BFC）

上一篇我提到每一个元素都有自己的display属性，其属性值可以改变。其改变的方式，可以利用神奇的css盒模型（BFC）。

盒模型，是css可视化格式化系统的基础，可以用于元素定位和网页布局。一个盒模型是一个box，包括内容（content），padding（内边距），border（边框），margin（外边距）。我们知道行内元素是在一行排列，其内容决定宽高。块级元素可以自定义宽高，但是占据一整排。而成为box后，他内容的宽高我们就可以自行设定，且可以不占据一整排。如何将一个行内元素变成一个块级元素呢？可利用以下几种方式：1、根元素；2、float；3、overflow；4、display；5、position。其中经常会用到的是float和position，当我们定义一个div是，其中包括img，h标签，p标签，还有蒙版等等，如何使他们按照我们预想的方式排列。则是float浮动和position定位的有序组合。自然当用到浮动将其放在一排上是，而后面的box想另起一排，然后上一排后面剩余的宽度还足够后面的 box时，我们可以用到一个清除浮动，clear。

特别是在页面布局的时候，BFC让我发现这个页面可以随心所欲的排列，感到特别神奇。就像树上一朵花，我想让它开在哪跟枝上，想它长什么样，就是那个样。