BFC触发条件以及规则

触发条件:

1.float的值不为none

2.overflow的值不为visible

3.display的值为table-cell、tabble-caption和inline-block之一

4.position的值不为static或则releative中的任何一个

规则:

1.浮动的元素会被父级计算高度(父级触发了BFC)

2.非浮动元素不会覆盖浮动元素位置(非浮动元素触发了BFC)

3.margin不会传递给父级(父级触发了BFC),两个相邻元素上下margin会重叠(给其中一个元素增加一个父级,然后让他的父级触发BFC)

巧妙用法:

清除浮动;

非浮动元素盖住浮动元素,可依靠触发BFC来解决

margin合并情况,在其中一个元素父级触发BFC,将不会合并margin

猜你喜欢

转载自www.cnblogs.com/liuyuweb/p/11284826.html