【CSS】BFC块级格式上下文的说明与应用

【CSS】BFC块级格式上下文的说明与应用

本文章对BFC块格式上下文的含义,原理进行说明,并且附加常用的应用场景。

一、特性与说明

BFC特点:

  • 里面的元素无论有多么翻江倒海的布局,都不会影响到容器外的布局,BFC区域之间是相互独立的。
  • BFC容器之间的上下外边距margin不会重叠,也就是能解决常规文档流的兄弟盒子外边距坍塌问题
  • BFC容器内部强制让浮动元素参与计算高度,也就是能解决浮动的父盒子高度坍塌

属于BFC的元素 / 如何触发BFC:

  • 根元素html
  • 浮动元素(不为none)
  • 绝对定位元素(absolute或者fixed)
  • 行内块元素(inline-block)
  • 表格单元格和表格标题(table-x x x)
  • overflow不为visible
  • 弹性布局flex
  • 设置display: flow-root

二、关于标签

(1)html本身是一个BFC区域

以下是证明:
我们看一个默认的,没有任何样式的html文件,浏览器的用户代理样式表会给初始的body一个margin:8px的默认样式。
【CSS】BFC块级格式上下文的说明与应用_第1张图片
body是html的子盒子,如果这两个都是正常盒子,根据外边距坍塌,body的上外边距会直接顶开,带着html盒子一起下移。但很明显以下事实告诉我们并不会这样。
【CSS】BFC块级格式上下文的说明与应用_第2张图片
可以看到标签并没有被顶开,因为html是一个BFC区域。
这里给出模拟的两个普通盒子:

    .c-html{
        height: 200px;
        width: 200px;
        background-color:cornflowerblue
    }
    .c-body{
        margin: 10px;
        height: 100px;
        width: 100px;
        background-color:aquamarine
    }

【CSS】BFC块级格式上下文的说明与应用_第3张图片

(2)无法通过overflow:hidden触发BFC

W3C对BFC定义中有写到,html的overflow默认是visible,那么子元素body的overflow:hidden被用于视口,overflow的扩散行为会导致body的overflow属性为visible,所以无法触发BFC。

只能把html元素的overflow设置为hidden之后,body设置hidden(此时body不会被用于视口)才会触发BFC。

三、BFC盒子的应用

(1)解决兄弟盒子垂直坍塌

在body内的非BFC元素盒子,上下外边距会重叠,会造成外边距垂直坍塌。
解决这个问题,也是依靠BFC。分别用两个BFC盒子包裹,由于BFC特性,两个盒子不会相互影响。

    .box1{
        margin: 20px;
        height: 200px;
        width: 200px;
        background-color:gold;
    }
    .BFC{
        overflow: hidden;
    }

【CSS】BFC块级格式上下文的说明与应用_第4张图片
添加BFC包裹后:

【CSS】BFC块级格式上下文的说明与应用_第5张图片

(2)解决父子外边距塌陷

父子盒子嵌套,给子盒子添加margin-top,效果并非子盒子远离了父盒子的边框,而是带着父盒子偏离了上方。

解决方法:让父盒子触发BFC,比如让父盒子display: flow-root变成一个独立的区域,不会影响外面的元素布局。

另外的解决方法:

  • 父盒子加边框
  • 父盒子加padding

(3)解决浮动高度坍塌

当父盒子没有设定高度,子盒子使用了浮动时,父盒子没有内容撑开会发生高度坍塌。

解决方法:让父盒子触发BFC,不影响外部布局,强行包裹了子元素,让浮动元素也参与了高度计算。

既然触发BFC可以清除浮动,那为何一般使用最多的是overflow:hidden

BFC都可以清除浮动,但是如果用float或者position的方式清除浮动,这样会导致父元素本身脱离文档流,又会继续影响父元素的兄弟盒子或者更上的父元素。如果是flex的方式的BFC,那么父元素内部的浮动就会消失。
选择overflow:hidden,或者是伪元素清除浮动,实现BFC的代价会更小。

(4) 阻止标准流盒子被浮动覆盖

当盒子A和盒子B在同一行时,如果盒子B浮动会覆盖标准流元素。

但当盒子A触发了BFC,那么浮动的盒子B不能覆盖A,此时盒子A会占据除了B之外的整行。可以利用这个特性,实现盒子A根据盒子B的宽度来做自适应。

原因就是浮动的B本来是BFC盒子,当A也变成BFC之后,就完全不会相互影响了。

    .box1{
        height: 200px;
        width: 200px;
        float: left;
        background-color:gold;
    }
    .box2{
        height: 300px;
        background-color: chartreuse;
    }
    .BFC{
        overflow: hidden;
    }

【CSS】BFC块级格式上下文的说明与应用_第6张图片

(5)清除浮动的方式

  • 创建BFC区域
    设置overflow:hidden变成BFC盒子,但是副作用是会隐藏溢出的元素显示。

  • 良好的创建方式
    使用display: flow-root会直接创建新的BFC。相比于其他的方法,flow-root更兼容浏览器,运行更稳定。

  • 额外标签
    在浮动元素的末尾添加一个空的标签,并且设置clear属性(这个标签必须是块元素)

  • after伪元素
    实现的原理与额外标签一致,只是用伪元素替代了具体的标签。没有增加标签,也没有隐藏影响,副作用更小。

你可能感兴趣的:(css,前端,css3)