什么是BFC?BFC是什么?为什么会有BFC

块级格式化上下文(Block Formatting Context)简称BFC

BFC的目的就是:形成一个完全独立的空间,让空间中的子元素不会影响到外面的布局。如何才能形成这样一个神奇的空间呢?

  我们通过CSS为元素设置一些属性,就能触发,常用的有四种:

    float不为none
    postion不为relative和static
    overflow为auto scroll和hidden
    display的值为inline-block

BFC能解决什么问题呢?

  1、解决浮动元素令父元素高度塌陷的问题

    如,父元素div包含几个子div,这几个子元素都为浮动时,父元素高度坍塌,这是因为浮动的子元素脱离了文档流,漂浮于父元素之上,父元素检测不到子元素的存在,获取不到子元素高度(说白了就是脱离文档流 父元素不会计算该高度),所以看起来父元素没有高度了。父元素后面的布局也就乱了,这时,可以给父元素添加属性overflow:hidden,当然,这只是一种BFC的做法,还可以display: table-cell;或position: fixed;或position: absolute;

  触发了BFC的容器就是页面上的一个完全隔离开的容器,容器里的子元素绝对不会影响到外面的元素,为了保证这个规则,触发了BFC的父元素在计算高度时,不得不让浮动的子元素也参与进来,变相的实现了清楚内部浮动的目的。

 

上一篇:从jdk源码深入剖析java类加载机制


下一篇:JVM启动及类加载