BFC布局

这几天都没有写博客，自己的懒惰又要跑出来了，发觉不能再这样下去了，不然就什么都不想干了，然后将之前已经写得差不多的博客重新检视了一遍。这篇博客已经写得挺久的了，但是一直没有发布，现在补充了一些，也让自己回顾了一下BFC布局。

BFC的全称是block formatting context（块级格式上下文）， 它是指一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，并且与区域外部无关。那么怎样才能触发BFC呢？

一。根元素

二。float的值为left或right

三。overflow的值为hidden

四。display的值为inline-block，table-cell，table-capation，flex

五。position的值为absolute或fixed

为什么我们会使用BFC布局呢？我们都知道BFC是指独立的块级渲染区域，既然是独立的，说明内部与外部互不干扰，这就避免了相邻块级元素的margin覆盖，当然还有一个长处是可以包含浮动元素。

我想做前端开发的都对IE恨之入骨，可惜IE是永远存在的痛。IE的haslayout与BFC具有很多相似之处，一个元素有没有布局就是通过haslayout告诉浏览器，如果有布局，haslayout的值就是true，反之就是false。那么如何触发layout呢？

一。display:inline-block

二。float:left / right

三。position:absolute / fixed

四。zoom:1

五。overflow:hidden

考虑到浏览器的兼容性和对元素的影响，建议使用zoom：1来触发layout