BFC与hasLayout之间的故事

刚拒绝了一个很有诱惑的公司，不是不想去，而是对现在的能力还不确定，希望能够进一步提高自己的技能，所有想写博客了，监督自己的学习进度·········现在还没有开放博客，希望成熟一些后再开放吧！

进入正题啦啦啦！

一、什么是BFC(Block Formatting Content)？

     IE用的是hasLayout而非IE浏览器用的即是BFC（块格式化上下文）

1、BFC是W3C CSS2.1中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素之间的关系和相互作用。在创建了BFC的元素中，其子元素会一个挨着一个的放置，垂直方向上他们的起点是一个包含块的顶部，两个相邻元素的垂直距离取决于margin值，但是呢，相邻的块级元素的垂直边距会折叠（collpase）（我是这么理解的：就是设置margin：10px，但是显示是5px，不知正确否？）

2、在BFC中，每一个元素的左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边），即使存在浮动也会如此（尽管一个元素的内容区域会因为浮动而压缩）（不是很理解这个）。除非这个元素也创建了新的BFC。

3、在CSS3中对BFC有了新的定义：http://www.w3.org/TR/css3-box/#block-level0，CSS3中将BFC 叫做 flow root。

二、怎么才能触发BFC呢？只要满足下面其中之一的要求即可

1、float不能为none； 2、overflow（不能为visibile）； 3、display:(table-cell\table-caption\inline-block)；4、position:(任何值除了static\relative)

Tips：我们有时会用overflow：hidden去清楚浮动。就是因为它可以触发元素的块格式化上下文(IE6,7要申明zoom:1)，这个方法确实简单，但是相当粗暴。

三、什么是hasLayout？

这个属性是IE特有的，与其他浏览器没有一毛线的关系，霸道吧。说起IE就是痛啊！

1、Layout是IE浏览器渲染引擎的一个内部组成部分。在IE中，一个元素要么对自己的自身内容进行组织和计算要么就是依赖其包含块来计算和组织内容。为了协调这两种方式的矛盾，渲染引擎采用了'hasLayout'属性，属性值可以为true或者flase，当一个元素的hasLayout为true时，我们就说这个元素有一个布局（Layout），或者拥有布局，这个时候就不用依赖其包含块了而是靠自身内容。

2、在IE中，我们可以通过'hasLayout'属性可以判断一个元素是否拥有Layout。如object.currentStyle.hasLayout。

3、很多IE6下的bug都是因为没有触发hasLayout而造成的。所有我们在解决bug时候就是去触发元素的布局。

四、怎么触发元素hasLayout呢？

1、有些元素因为默认就拥有布局所以就不用触发了，如（html,body,table,th,tr,td,img,hr,input,button,select,textarea,fileldset,legend,iframe,embed,object,applet,marquee）

2、而其他元素就没有了，没有的话怎么触发呢？当然是用css去触发了，如下属性。

display:inline-block,  height(除auto以外的所有值),  widht(除auto以外的所有值）,    float:right或left,   position:absolute,   writing-mode:tb-rl;   zoom:（除normal外的任何值）

IE7还有一些额外的元素，如下：请看！

五、hasLayout和BFC的作用？很重要哟，因为要用到起····

 

一、解决内部元素浮动问题

1、如果父元素的子元素有浮动，父元素的高度塌陷怎么解决？那么在父元素上激活hasLayout和BFC就可以清楚浮动了，最常见的是zoom：1（IE6下），overflow：hidden（激活标准浏览器下的MFC）

2、浮动元素和常规元素的重叠问题

当浮动元素右边跟随的是常规流元素会重叠

设置常规流元素.bfc{overflow:hidden; zoom:1}激活hasLayout和BFC便可解决问题，如下图：

3、解决相邻元素margin边距重叠问题

我们先要知道怎么才会产生margin边距重叠的情况：两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠，这里毗邻指的是没有被非空内容、padding、border、clear隔开。看看重叠的情况是这样的。

 既然问题出来了，我们就要去解决它呀，怎么清除边距重叠呢？

1、浮动元素、inline-block、绝对定位元素的margin值不会和垂直方向上的margin值产生折叠。

2、创建了BFC块格式化上下文的元素，不会和他的子元素产生margin折叠

 

我想说我现在的技术在瓶颈期，怎么突破啊？现在对js和响应式布局的研究兴趣又来了，可是感觉这基础的还不咋个扎实，不要丢了西瓜去捡芝麻·····慢慢走吧！