zoukankan      html  css  js  c++  java
  • BFC块级格式化上下文

           BFC是英文Block formatting contexts,这个概念最开始出现在CSS2.1,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作,中文翻译过来是“块级格式化上下文”。下面这句话是W3help有关BFC的解释。

           在创建了 Block Formatting Context 的元素中,其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 'margin' 特性。在 Block Formatting Context 中相邻的块级元素的垂直边距会折叠(collapse)。

      本人在网上大致的找了找触发BFC的条件:

    1. "float"的值不是"none"
    2. "overflow"的值不是"visible"
    3. "display"的值是"table-cell"
    4. "table-caption",或"inline-block"
    5. "position"的值既不是"static"也不是"relative"

      当我们在编写网页的时候有时候可能会遇到这样的问题;

      当2个div嵌套的时候如下图:

      

      它们的样式:

      

      上述代码块运行结果如下:

      

      我们有时候往往希望内部的div居于外部div的中心,调整一个元素的位置,第一个可以用绝对定位,第二个可以用相对定位,还有就是固定定位。一般我们首先想到的就是调内部div的margin,top和left。margin-top:50px;margin-left:50px;这2句代码能不能实现我们所期望的,下面是演示结果:

    结果为什么外部div也会受到内部div的margin的影响呢?

    最初,外层div的overflow属性为visible;可见,当我们去设置内部div的margin-top的时候,他没有触发BFC块级格式化上下文,所以看到的结果就是上面这种情况。

    那么解决这个问题的方法

    第一:给外部div的overflow属性设置成hidden,

    第二:给外部div加上border

    第三:给外部div的float属性设置成left;或者给内部div的float属性设置成left

    第四:给外部div的display属性设置成table-cell;

    第五:position设置为absolute

  • 相关阅读:
    zookeeper + dubbo 搭建
    java 测试 powermock 使用
    设计模式(结构型模式) 之 装饰器模式
    设计模式(创建型模式)工厂模式
    设计模式(结构型模式) 之 桥接模式
    django基础(转载)
    Django之ORM学习
    Django之form组件的学习
    Django之中间件学习
    Django之model 详解
  • 原文地址:https://www.cnblogs.com/yiyuanqian/p/3935477.html
Copyright © 2011-2022 走看看