原理解释——block formatting context
下列情况将创建一个块格式化上下文:
- float的值不为none
- position的值为absolute或fixed
- overflow的值不为visible(默认就是visible,所以要改变必须显式设置)
- display的值为table-cell, table-caption, flex, inline-flex, inline-block,中的任何一个
- 根元素(其中除了inline-flex和inline-block的前后不会强制进行换行以外,其他都会三者都会使元素强制前后换行。)
BFC应用要点:
- BFC不会和浮动元素重叠。
- 例:普通浮动
- 例:将右边变成BFC(添加overflow:hidden)
- 解析:右边设置了BFC后,由于(1)BFC不能与浮动元素重叠,所以这里BFC自动避让开,就像两者接壤处有一条边界,BFC永远不会超过。并且如果想在BFC上设置margin-left使两者有间隔,这个将遏制必须大于图片的宽度,因为(2)每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
- BFC会计算内部浮动元素的高度
- 当父元素不是BFC,且未设置高度,而内部又有浮动元素时:
- 如果把父元素改成BFC,它就会识别到内部浮动元素的高度,从而将自己的高度撑开,避免高度塌陷
-
利用上面的父容器会计算内部浮动元素高度的特性,可以使父元素形成闭合浮动,从而让浮动不影响其他元素,达到清楚浮动的目的。
-
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
-
BFC可以解决上下margin重叠的问题:
- BFC内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠,但只要两个中有一个不属于父BFC,或两者都创建了新的BFC,那么margin就不会发生重叠
网友评论