HTML5学习_day07(2)--BFC定义

1.BFC？

块级格式化上下文(block formatting context)简称BFC

它规定了块级盒子的渲染布局方式。

 

2.什么元素可以触发产生一个BFC？

1.根元素(HTML)

2.float浮动属性为非none,如设置为left或right时

3.position为 absolute(绝对定位)或fixed(固定定位)

4.display为inline-block,table-cell,table=caption,flex,inline-flex时

5.overflow不为visible,如设置值为hidden等

 

3.BFC布局特点

a.内部的block box会在垂直方向一个一个进行排列

b.BOX垂直方向的距离由margin决定，属于同一个BFC中的两个相邻的box的margin值会重叠.

c.每个元素的margin box左边，与包含块border box的左边相接触()

d.BFC的区域不会与float box重叠

f.BFC在页面是一个隔离的独立容器，容器里面子元素不会影响到外面的元素。

g.计算BFC的高度时,浮动元素也计算在内。(这个就是用overflow:hidden;来清除浮动 重新算高度的原理)

 

4.BFC可以用来做什么

a.清除浮动

b.阻止边距重叠

c.用于布局

 

5.兼容性

IE6~7是不支持BFC，它由一个私有的一个属性hasLayout,触发的条件跟BFC触发条件相似