白话Block Formatting Context

标签： 推荐分享 block format | 发表时间：2010-06-24 09:31 | 作者：robot MArCoRQ
出处：http://www.ued163.com

一，啥是Block Formatting Context

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

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

二，怎样才能形成Block Formatting Context

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

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

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

  1. Block Formatting Context可以阻止边距折叠（margin collapsing）。我们知道在一般情况下，两个上下相邻的盒子会折叠它们垂直方向接触到的边距，这种情况只会发生在同一个Block Formatting Context中。换句话说，在同一个布局环境中（Block Formatting Context）是边距折叠的必要条件。这也就是为什么浮动的元素和绝对定位元素不会发生边距折叠的原因（当然还有很多种情况也不会折叠）。

  2. Block Formatting Context可以清除内部元素的浮动。考虑一下下面的例子（请用标准浏览器查看）： 
    <!DOCTYPE html>
<html>
<head>
	<title>Demo</title>
	<style type="text/css">
		html, body {
			margin: 0;
			padding: 0;
		}
		#red, #orange, #yellow, #green {
			width: 100px;
			height: 100px;
			float: left;
		}
		#red {
			background: red;
		}
		#orange {
			background: orange;
		}
		#yellow {
			background: yellow;
		}
		#green {
			background: green;
		}
	</style>
</head>
<body>
	<div id="c1">
		<div id="red"></div>
		<div id="orange"></div>
	</div>
	<div id="c2">
		<div id="yellow"></div>
		<div id="green"></div>
	</div>
</body>
</html>

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

  3. Block Formatting Context可以阻止元素被浮动覆盖。请看示例： 
    <!DOCTYPE html>
<html>
<head>
	<title>Demo</title>
	<style type="text/css">
		html, body {
			margin: 0;
			padding: 0;
		}
		#left {
			width: 100px;
			height: 100px;
			background: red;
			float: left;
		}
		#right {
			height: 200px;
			background: yellow;
		}
	</style>
</head>
<body>
	<div id="left"></div>
	<div id="right"></div>
</body>
</html>

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

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

作者：周明智

相关 [白话 block formatting] 推荐：

白话Block Formatting Context

- MArCoRQ - UED TEAM,用户体验设计,web前端开发
一，啥是Block Formatting Context. 当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局. 一个环境中的元素不会影响到其它环境中的布局. 为了让我们有个感性的认识，举个不太合适的例子. 你可以把一个页面想象成大的集装箱，这个集装箱里装的货物就是HTML元素.

详解inline-block

- - Web前端 - ITeye博客
转自：http://ued.taobao.com/blog/2012/08/inline-block/. 曾几何时，display:inline-block 已经深入「大街小巷」，随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码.

display属性的block,inline和inline-block

- - CSDN博客推荐文章
  none  此元素不会被显示. block 此元素将显示为块级元素，此元素前后会带有换行符. 此元素会被显示为内联元素，元素前后没有换行符. inline-block 行内块元素. （CSS2.1 新增的值） . 在css中，inline-block：将对象呈递为内联对象，但是对象的内容作为块对象呈递.

短文: Block Chain 与 Paxos

- comain - fcicq&#39;s blog-beta
作为 P2P 系统, Bitcoin 的一致性实现方法是值得专门写出来的.. 下面一一列举 Paxos 的专有名词, 并指出 Bitcoin 中的对应方法/实现.. –最长链中所有的 Block 均为决议. (但链末尾并不稳定, 所以最近 120 个 Block 里产生的钱不能花.. 经历 120 block 之后, block 是彻底不可逆转的, 严格意义上最近 120 block 不能算通过的决议).

可视化格式模型（ Visual formatting model）再学习

- - 进步博客
“理论不懂就实践，实践不会就学理论”，非常赞同bluedavy的这句话. 实践过程中经常会遇到某个属性的使用，浏览器渲染效果与预期效果不符，虽然通过死记硬背能避免或巧妙应用这种效果，但总感心虚发慌、毫无自信，因为不知晓背后的原理. 这时就不要再用“就是这样的”的借口来搪塞自己，我们需要重新认识它. 元素A，C绝对定位，不设置top，bottom值；.

HBase-Data-Block-Encoding-Types介绍 - AlstonWilliams's Blog

- -
Cloudera HBase官方文档. 阅读本文前，请了解一下HFile的格式，对阅读本文会大有裨益．. 我们这里简单介绍一下HFile的组成，让读者知道什么是Data Block Encoding．. HFile中，包含了好几个部分，具体的请查看. HFile Format．我们这里只关心HFile里的Data Block．.

hadoop学习（七）WordCount+Block+Split+Shuffle+Map+Reduce技术详解

- - CSDN博客数据库推荐文章
纯干活：通过WourdCount程序示例：详细讲解MapReduce之Block+Split+Shuffle+Map+Reduce的区别及数据处理流程.        Shuffle过程是MapReduce的核心，集中了MR过程最关键的部分. 要想了解MR，Shuffle是必须要理解的. 了解Shuffle的过程，更有利于我们在对MapReduce job性能调优的工作，以及对MR内部机理有更深一步的了解.

提高Hadoop Balancer 迁移block速度的方法

- - Binospace
如何提高Hadoop Balancer迁移block的速度. 1）增加DataNode用于balancer的bandwidth. 这个值是DataXceiverServer上BlockBalanceThrottler控制的带宽大小. 该单位是Byte，如果机器的网卡和交换机的带宽有限，可以适当降低该速度.

USB Flash Block Unblock – 设置 USB 只读 | 小众软件 > 实用工具

- 亚 强 - 小众软件 - Appinn
课室的电脑堪称是毒王呀，听说用了5、6年，每次要复制以一些文档上去，就变成了病毒的交流大会，现在很多小白都不敢再插U盘了. 唯有搬出 USB Flash Block Unblock 这款软件了. USB Flash Block Unblock 真正是小白级的软件，在软件界面的下拉框选择模式：普通、只读、禁止.

[转]拜拜了，浮动布局——基于inline-block的列表布局

- - 畅之部落格
本文其实真实题目应该是“CSS float浮动的深入研究、详解及拓展(三)”，但是为了更显著的体现本文的核心内容，顺便搞点噱头吸引眼球，同时跟百哥和谷妹玩点小暧昧，就改成了现在这个样子了. 没有爱的日子，时间如指尖细沙，不知不觉就流逝了. 写“ CSS float浮动的深入研究、详解及拓展(一)”和“ CSS float浮动的深入研究、详解及拓展(二)”似乎就在不久前，然而相隔差不多有一年之久了.