技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置：首页 --> CSS/HTML --> 白话Block Formatting Contexts

白话Block Formatting Contexts

浏览:1662次  出处信息

一，啥是Block Formatting Contexts

当涉及到可视化布局的时候，Block Formatting Contexts提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。

为了让我们有个感性的认识，举个不太合适的例子。你可以把一个页面想象成大的集装箱，这个集装箱里装的货物就是HTML元素。在现实生活中为了避免不同人的货物相互混淆，都是把货物打好包装再装入集装箱的。这样的话，无论你包装里面的货物怎么摆放，都不会影响到其他人的货物。那么这个包装就可以被想象成Block Formatting Contexts。

二，怎样才能形成Block Formatting Contexts

当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Contexts

  • float的值不为none。
  • overflow的值不为visible。
  • display的值为table-cell, table-caption, inline-block中的任何一个。
  • position的值不为relative和static。

三，Block Formatting Contexts在生产中有什么作用

  1. Block Formatting Contexts可以阻止边距折叠（margin collapsing）。我们知道在一般情况下，两个上下相邻的盒子会折叠它们垂直方向接触到的边距，这种情况只会发生在同一个Block Formatting Contexts中。换句话说，在同一个布局环境中（Block Formatting Contexts）是边距折叠的必要条件。这也就是为什么浮动的元素和绝对定位元素不会发生边距折叠的原因（当然还有很多种情况也不会折叠）。
  2. Block Formatting Contexts可以自闭合浮动。考虑一下下面的例子（请用标准浏览器查看）：
     
    01 <!DOCTYPE html>
    02 <html>
    03 <head>
    04   <title>Demo</title>
    05   <style type="text/css">
    06     html, body {
    07       margin: 0;
    08       padding: 0;
    09     }
    10     #red, #orange, #yellow, #green {
    11       width: 100px;
    12       height: 100px;
    13       float: left;
    14     }
    15     #red {
    16       background: red;
    17     }
    18     #orange {
    19       background: orange;
    20     }
    21     #yellow {
    22       background: yellow;
    23     }
    24     #green {
    25       background: green;
    26     }
    27   </style>
    28 </head>
    29 <body>
    30   <div id="c1">
    31     <div id="red"></div>
    32     <div id="orange"></div>
    33   </div>
    34   <div id="c2">
    35     <div id="yellow"></div>
    36     <div id="green"></div>
    37   </div>
    38 </body>
    39 </html>

    在上面的代码本意是做一个两行两列的布局，但是由于#red, #orange, #yellow, #green这四个div同在一个布局环境中，即便通过#c1, #c2这两个div划分，浮动之后它们还会一个接着一个排列，并不会换行。我们要做的就是把这四个div两两划分到不同的布局环境之中，从而闭合浮动。通过上面的分析，让#c1形成新的Block Formatting Contexts就可以解决问题。

  3. Block Formatting Contexts可以阻止元素被浮动覆盖。请看示例：
     
    01 <!DOCTYPE html>
    02 <html>
    03 <head>
    04   <title>Demo</title>
    05   <style type="text/css">
    06     html, body {
    07       margin: 0;
    08       padding: 0;
    09     }
    10     #left {
    11       width: 100px;
    12       height: 100px;
    13       background: red;
    14       float: left;
    15     }
    16     #right {
    17       height: 200px;
    18       background: yellow;
    19     }
    20   </style>
    21 </head>
    22 <body>
    23   <div id="left"></div>
    24   <div id="right"></div>
    25 </body>
    26 </html>

    在标准浏览器下可以看到，普通的#right元素被浮动的#left元素所覆盖了。要想避免这种情况，有一种方法就是让#right形成新的Block Formatting Contexts。但是这里一定要注意的是，浮动不会覆盖的只是Block Formatting Contexts的border-box。换句话说，形成Block Formatting Contexts元素的margin还是会被浮动所覆盖掉的。

如果想全面了解Block Formatting Contexts，请看CSS 101: Block Formatting Contexts这篇文章。

建议继续学习：

  1. 瀑布流布局浅析    (阅读：6055)
  2. Android用户界面设计：表格布局    (阅读：4873)
  3. HTML页面布局基础    (阅读：3700)
  4. CSS的未来：明智的布局工具终于到来    (阅读：3151)
  5. 手机产品框架层设计: 两种主要的布局方式    (阅读：2458)
  6. 多栏自适应布局问题浅谈    (阅读：2226)
  7. Ext JS 4 布局和容器：Layouts、Containers    (阅读：2193)
  8. 白话Block Formatting Context    (阅读：1955)
  9. Android流式布局实现    (阅读：1720)
  10. 网页设计创新式布局与交互    (阅读：1583)
QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：一个全角空格的问题
后一篇：IE 6与W3C盒子模型 >>
文章信息
© 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1