问答题X 纠错
概念:BFC全称Block Formatting Context,中文意思为块级格式上下文。
通俗的来说:BFC是一个独立的布局环境,我们可以理解为一个箱子(实际上是看不见摸不着的),箱子内部的元素无论如何翻江倒海,都不会影响到外部。
转换为BFC的理解则是:BFC中的元素的布局是不受外界的影响(我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。比如清除浮动)并且在一个BFC中,块元素与行元素都会垂直的沿着其父元素的边框排列。
如何触发BFC:
1.浮动元素,float除none以外的值。
2.position的值不为static或者relative。
3.display不为none。
4.overflow除了visible以外的值。
BFC的应用:
1.解决浮动塌陷问题
2.自适应两栏布局(我们还可以运用BFC可以阻止元素被浮动元素覆盖的特性来实现自适应两栏布局。方法:给没有浮动的元素加overflow:hidden。)
3.解决设置margin值重叠问题。
总结:BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。它规定了元素与其他元素的关系和相互作用。
你可能喜欢