zoukankan      html  css  js  c++  java
  • BFC简单介绍

    W3C关于BFC的一个解释:

     

    1. Block Formatting Context(块格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。   
    2.   
    3. 在创建了 Block Formatting Context 的元素中,其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。在 Block Formatting Context 中相邻的块级元素的垂直边距会折叠(collapse)。   
    4.   
    5. 在 Block Formatting Context 中,每一个元素左外边与包含块的左边相接触(对于从右到左的格式化,右外边接触右边), 即使存在浮动也是如此(尽管一个元素的内容区域会由于浮动而压缩),除非这个元素也创建了一个新的 Block Formatting Context 。   


    看起来比较蛋疼是吧,另一个通俗点的解释是:在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ,类型可以是 block ,或者是 inline ,但不能同时属于这两者。并且, Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化, Inline boxes(块内框) 则在 inline formatting context(行内格式化上下文) 里格式化。任何被渲染的元素都属于一个 box ,并且不是 block ,就是 inline 。即使是未被任何元素包裹的文本,根据不同的情况,也会属于匿名的 block boxes 或者 inline boxes。所以上面的描述,即是把所有的元素划分到对应的 formatting context 里。

    那BFC到底是啥?就是一个作用范围。可以把它理解成是一个独立的容器,并且这个容器的里box的布局,与这个容器外的毫不相干。

    简单地说:Block Formatting Context就是页面上的一个隔离的独立容器,容器里面的子元素不会在布局上影响到外面的元素,反之也是如此。

    看看BFC的触发条件

    • float不为none
    • overflow不为visible (IE6无效)
    • “display”的值是”table-cell”,”table-caption”,或”inline-block”
    • “position”的值既不是”static”也不是”relative”
    • IE的hasLayout会触发一个新的block formatting context

    而BFC的特性是

    • 不存在collapsing margins问题
    • 边缘不会和float box重叠

    第一个margin不会叠加的特性,可以理解为两个处于普通流的盒子,会有margin叠加的问题,是因为他们属于相同的BFC,当他自身创建了一个新的BFC时,这个问题就不存在了

    第二个特性就特别有用了,因为元素触发了BFC的话,就不会被float元素覆盖,当子元素全部浮动的时候也能够正确地包含了

    但是在 IE6 IE7 IE8(Q) 中没有触发 hasLayout 并在其他浏览器中创建了 Block Formatting Context 的元素的表现会有差异。具体可以参考w3help

    保险的解决方案就是既触发IE的hasLayout,又触发BFC,具体的css就是既overflow:hidden,又zoom:1(虽然zoom并不能通过校验),另外overflow还有一个问题就是会影响盒子的表现

    相对于经常要限宽,还有一大堆BUG的float来布局,用BFC来布局会相当方便

  • 相关阅读:
    Truck History(poj 1789)
    Highways poj 2485
    117. Populating Next Right Pointers in Each Node II
    116. Populating Next Right Pointers in Each Node
    115. Distinct Subsequences
    114. Flatten Binary Tree to Linked List
    113. Path Sum II
    109. Convert Sorted List to Binary Search Tree
    106. Construct Binary Tree from Inorder and Postorder Traversal
    105. Construct Binary Tree from Preorder and Inorder Traversal
  • 原文地址:https://www.cnblogs.com/chjb/p/4275040.html
Copyright © 2011-2022 走看看