• 深入理解BFC


    定义

      在解释BFC之前,先说一下文档流。我们常说的文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指BFC中的FC。FC是formatting context的首字母缩写,直译过来是格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用。常见的FC有BFC、IFC,还有GFC和FFC。BFC是block formatting context,也就是块级格式化上下文,是用于布局块级盒子的一块渲染区域。

    触发条件

      满足下列条件之一就可触发BFC

      【1】根元素,即HTML元素

      【2】float的值不为none

      【3】overflow的值不为visible(除非该值已经扩散到了视口)

      【4】display的值为inline-block、table-cell、table-aption

      【5】position的值为absolute或fixed

    作用

      BFC是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然。它与普通的块框类似,但不同之处在于:

     【1】可以阻止元素被浮动元素覆盖

        【2】可以包含浮动元素 

         我们可以利用BFC的第2条特性来“清浮动”,这里其实说清浮动已经不再合适,应该说包含浮动。也就是说只要父容器形成BFC就可以

        更多方法:清除float影响

     【3】两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠

        更多方法:外边距塌陷 margin collapsing

    overflow特殊:

    1.root元素上的overflow属性置于viewport上

    2.overflow扩散行为:当root元素是html元素且overflowvisible,而且html元素有body作为其子元素,UA则需要将第一个body之上的overflow属性应用于视口;

    用于视口的overflow:将被解析为visible

    例子:

    1.给body加上overflow:hidden,无法触发BFC创建。
    解释:本用例中body {overflow:hidden} html {overflow: visible}(html为默认overflow),body的overflow:hidden被应用于视口,body的最终使用值为overflow:visible,因此body没有创建BFC。

    2.给body和html同时加上overflow:hidden,成功触发BFC创建。
    解释:本用例中body, html{overflow:hidden},html的overflow:hidden被用于视口,body的overflow计算值是hidden,因此创建了BFC。

     

  • 相关阅读:
    怎么看到数据库以前做过的日志?
    感觉很好的网站
    uview 滑动切换
    Flyweight享元(结构型模式)
    悟空,真的是空?
    Interpreter解释器(行为型模式)
    Proxy代理(结构型模式)
    [转]有一种爱叫索取
    Command命令(行为型模式)
    Composite组合(结构型模式)
  • 原文地址:https://www.cnblogs.com/coderL/p/7641967.html
Copyright © 2020-2023  润新知