CSS3:学习BFC - 简书
CSS3:学习BFC
BFC全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。要明白BFC到底是什么，首先来看看什么是视觉格式化模型。
视觉格式化模型
视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制，它也是CSS中的一个概念。
视觉格式化模型定义了盒（Box）的生成，盒主要包括了块盒、行内盒、匿名盒（没有名字不能被选择器选中的盒）以及一些实验性的盒（未来可能添加到规范中）。盒的类型由display属性决定。
块盒（block box）
块盒有以下特性：
当元素的CSS属性display为block，list-item或table时，它是块级元素 block-level；
视觉上呈现为块，竖直排列；
块级盒参与(块格式化上下文)；
每个块级元素至少生成一个块级盒，称为主要块级盒(principal block-level box)。一些元素，比如&li&，生成额外的盒来放置项目符号，不过多数元素只生成一个主要块级盒。
行内盒（inline box）
行内盒有以下特性：
当元素的CSS属性display的计算值为inline，inline-block或inline-table时，称它为行内级元素；
视觉上它将内容与其它行内级元素排列为多行；典型的如段落内容，有文本(可以有多种格式譬如着重)，或图片，都是行内级元素；
行内级元素生成行内级盒(inline-level boxes)，参与行内格式化上下文(inline formatting context)。同时参与生成行内格式化上下文的行内级盒称为行内盒(inline boxes)。
所有display:inline的非替换元素生成的盒是行内盒；
不参与生成行内格式化上下文的行内级盒称为原子行内级盒(atomic inline-level boxes)。这些盒由可替换行内元素，或display值为inline-block或inline-table的元素生成，不能拆分成多个盒；
匿名盒（anonymous box）
匿名盒也有份匿名块盒与匿名行内盒，因为匿名盒没有名字，不能利用选择器来选择它们，所以它们的所有属性都为inherit或初始默认值；
如下面例子，会创键匿名块盒来包含毗邻的行内级盒：
Some inline text
&p&followed by a paragraph&/p&
followed by more inline text.
三个定位方案
在定位的时候，浏览器就会根据元素的盒类型和上下文对这些元素进行定位，可以说盒就是定位的基本单位。定位时，有三种定位方案，分别是常规流，浮动以及绝对定位。
常规流(Normal flow)
在常规流中，盒一个接着一个排列;在块级格式化上下文里面， 它们竖着排列；在行内格式化上下文里面， 它们横着排列;当position为static或relative，并且float为none时会触发常规流；对于静态定位(static positioning)，position: static，盒的位置是常规流布局里的位置；对于相对定位(relative positioning)，position: relative，盒偏移位置由这些属性定义top，bottom，left and right。即使有偏移，仍然保留原有的位置，其它常规流不能占用这个位置。
浮动(Floats)
盒称为浮动盒(floating boxes)；它位于当前行的开头或末尾；这导致常规流环绕在它的周边，除非设置 clear 属性；
绝对定位(Absolute positioning)
绝对定位方案，盒从常规流中被移除，不影响常规流的布局；它的定位相对于它的包含块，相关CSS属性：top，bottom，left及right；如果元素的属性position为absolute或fixed，它是绝对定位元素；对于position: absolute，元素定位将相对于最近的一个relative、fixed或absolute的父元素，如果没有则相对于body；
块格式化上下文
到这里，已经对CSS的定位有一定的了解了，从上面的信息中也可以得知，块格式上下文是页面CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。
BFC的创建方法
根元素或其它包含它的元素；
浮动(元素的float不为none)；
绝对定位元素(元素的position为absolute或fixed)；
行内块inline-blocks(元素的display: inline-block)；
表格单元格(元素的display: table-cell，HTML表格单元格默认属性)；
overflow的值不为visible的元素；
弹性盒 flex boxes(元素的display: flex或inline-flex)；
但其中，最常见的就是overflow:hidden、float:left/right、position:absolute。也就是说，每次看到这些属性的时候，就代表了该元素以及创建了一个BFC了。
BFC的范围在MDN中是这样描述的。
A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.
中文的意思一个BFC包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。
这段看上去有点奇怪，我是这么理解的，加入有下面代码，class名为.BFC代表创建了新的块格式化：
&div id='div_1' class='BFC'&
&div id='div_2'&
&div id='div_3'&&/div&
&div id='div_4'&&/div&
&div id='div_5' class='BFC'&
&div id='div_6'&&/div&
&div id='div_7'&&/div&
这段代码表示，#div_1创建了一个块格式上下文，这个上下文包括了#div_2、#div_3、#div_4、#div_5。即#div_2中的子元素也属于#div_1所创建的BFC。但由于#div_5创建了新的BFC，所以#div_6和#div_7就被排除在外层的BFC之外。
我认为，这从另一方角度说明，一个元素不能同时存在于两个BFC中。
BFC的一个最重要的效果是，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。这是利用BFC清除浮动所利用的特性，关于清除浮动将在后面讲述。
如果一个元素能够同时处于两个BFC中，那么就意味着这个元素能与两个BFC中的元素发生作用，就违反了BFC的隔离作用，所以这个假设就不成立了。BFC的效果
就如刚才提到的，BFC的最显著的效果就是建立一个隔离的空间，断绝空间内外元素间相互的作用。然而，BFC还有更多的特性：
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the ‘margin’ properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
简单归纳一下：
内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）；
处于同一个BFC中的元素相互影响，可能会发生margin collapse；
每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；
计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；浮动盒区域不叠加到BFC上；
这么多性质有点难以理解，但可以作如下推理来帮助理解：html的根元素就是&html&，而根元素会创建一个BFC，创建一个新的BFC时就相当于在这个元素内部创建一个新的&html&，子元素的定位就如同在一个新&html&页面中那样，而这个新旧html页面之间时不会相互影响的。
上述这个理解并不是最准确的理解，甚至是将因果倒置了（因为html是根元素，因此才会有BFC的特性，而不是BFC有html的特性），但这样的推理可以帮助理解BFC这个概念。
从实际代码来分析BFC
讲了这么多，还是比较难理解，所以下面通过一些例子来加深对BFC的认识。
margin: 0;
padding: 0;
background: #73DE80; /* 绿色 */
opacity: 0.5;
border: 3px solid #F31264;
width: 200
height: 200
.right{ /* 粉色 */
background: #EF5BE2;
opacity: 0.5;
border: 3px solid #F31264;
min-height: 100
background:#888;
height: 100%;
margin-left: 50
&div class='box'&
&div class='left'& &/div&
&div class='right'& &/div&
显示效果：
绿色框（’#left’）向左浮动，它创建了一个新BFC，但暂时不讨论它所创建的BFC。由于绿色框浮动了，它脱离了原本normal flow的位置，因此，粉色框（’#right’）就被定位到灰色父元素的左上角（特性3：元素左边与容器左边相接触），与浮动绿色框发生了重叠。
同时，由于灰色框（’#box’）并没有创建BFC，因此在计算高度的时候，并没有考虑绿色框的区域（特性6：浮动区域不叠加到BFC区域上），发生了高度坍塌，这也是常见问题之一。
现在通过设置overflow:hidden来创建BFC，再看看效果如何。
&div class='box BFC'&
&div class='left'& &/div&
&div class='right'& &/div&
灰色框创建了一个新的BFC后，高度发生了变化，计算高度时它将绿色框区域也考虑进去了（特性5：计算BFC的高度时，浮动元素也参与计算）；而绿色框和红色框的显示效果仍然没有任何变化。
现在，现将一些小块添加到粉色框中，看看效果：
background: #
height: 50
margin: 10
&div class='box BFC'&
&div class='left'& &/div&
&div class='right'&
&div class='little'&&/div&
&div class='little'&&/div&
&div class='little'&&/div&
由于粉色框没有创建新的BFC，因此粉色框中白色块受到了绿色框的影响，被挤到了右边去了。先不管这个，看看白色块的margin。
利用同实例二中一样的方法，为粉色框创建BFC：
&div class='box BFC'&
&div class='left'& &/div&
&div class='right BFC'&
&div class='little'&&/div&
&div class='little'&&/div&
&div class='little'&&/div&
一旦粉色框创建了新的BFC以后，粉色框就不与绿色浮动框发生重叠了，同时内部的白色块处于隔离的空间（特性4：BFC就是页面上的一个隔离的独立容器），白色块也不会受到绿色浮动框的挤压。
以上就是BFC的分析，BFC的概念比较抽象，但通过实例分析应该能够更好地理解BFC。在实际中，利用BFC可以闭合浮动（实例二），防止与浮动元素重叠（实例四）。同时，由于BFC的隔离作用，可以利用BFC包含一个元素，防止这个元素与BFC外的元素发生margin collapse。元素是文档结构的基础，在CSS中，每个元素生成了一个包含了元素内容的框（box，也译为“盒子”）。但是不同的元素显示的方式会有所不同，例如&div&和&span&就不同，而&strong&和&p&也不一样。在文档类型定义（DTD）中对不同的元素规定了不同的类型，这也是DTD对文档之所以重要的原因之一。
1. 替换和不可替换元素
从元素本身的特点来讲，可以分为替换和不可替换元素。
a) 替换元素
替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。
例如浏览器会根据&img&标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据&input&标签的type属性来决定是显示输入框，还是单选按钮等。
(X)HTML中的&img&、&input&、&textarea&、&select&、&object&都是替换元素。这些元素往往没有实际的内容，即是一个空元素，例如：
&img src=”cat.jpg”/&&input type="submit" name="Submit" value="提交"/&
浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。
b) 不可替换元素
(X)HTML的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。例如：
&p&段落的内容&/p&
段落&p&是一个不可替换元素，文字“段落的内容”全被显示
2. 显示元素
除了可替换元素和不可替换元素的分类方式外，CSS2.1中元素还有另外的分类方式：块级元素（block-level）和行内元素（inline-level，也译作“内联”元素）。
a) 块级元素
在视觉上被格式化为块的元素，最明显的特征就是它默认在横向充满其父元素的内容区域，而且在其左右两边没有其他元素，即块级元素默认是独占一行的。
典型的块级元素有：&div&、&p&、&h1&到&h6&，等等。
通过CSS设定了浮动（float属性，可向左浮动或向右浮动）以及设定显示（display）属性为“block”或“list-item”的元素都是块级元素。
但是浮动元素比较特殊，由于浮动，其旁边可能会有其他元素的存在。而“list-item”（列表项&li&），会在其前面生成圆点符号，或者数字序号。
b) 行内元素
行内元素不形成新内容块，即在其左右可以有其他元素，例如&a&、&span&、&strong&等，都是典型的行内级元素。
display属性等于“inline”的元素都是行内元素。几乎所有的可替换元素都是行内元素，例如&img&、&input&等等。
不过元素的类型也不是固定的，通过设定CSS的display属性，可以使行内元素变为块级元素，也可以让块级元素变为行内元素。
盒： 每个元素都会生成一个盒，用来容纳后代（生成的盒）。所以我们可以把一个页面看做是由一个个的盒子堆砌而成的，只是这些盒子也分种类.
块级元素： display 为 block/table/list-item 的元素。
块级盒： 块级元素生成的盒
内联级元素： display 为 inline/inline-block/inline-table 的元素
内联级盒： 内联级元素生成的盒。但是只有 inline 元素生成的盒才叫做内联盒，它区别于 inline-block 元素的内联级块盒。
行盒： 内联格式化上下文中，包含来自同一行的盒的矩形区域叫做行盒
FC（Formating Context，格式化上下文） 是一个布局的环境，它里面的盒子需要遵循FC这套体系的规则， CSS2.1 中定义了 BFC（Block Formating Context，块级格式化上下文） 和 IFC（Inline Formating Context，内联格式化上下文）， BFC 讲的是块级盒子的布局规则， IFC 讲的是内联级盒子的布局规则。
1. 浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和’overflow’不为’visible’的块盒会为它们的内容建立一个新的块格式化上下文。（触发BFC）
2. 在一个块格式化上下文中，从包含块的顶部开始，盒在竖直方向一个接一个地放置。两个兄弟盒之间的竖直距离由’margin’属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并。
3. 在计算生成了 BFC 的元素的高度时，其浮动子元素应该参与计算。（触发bfc 解决父容器高度坍陷的问题）
IFC中的行盒的宽度是包含块的宽度减去 float 元素（如果有的话）的宽度，行盒高度是最高的盒的top与最低的盒的bottom之间的距离。
内联盒的高度是由line-height决定的，而可替换元素，inline-block，inline-table 元素的高度则是由它们的 margin 盒高度决定的。
对‘display’，‘position’和‘float’之间关系的定义&
1.同时设置’absolute’或者’fixed’、非 ‘none’ 的 float，float 会被覆盖为 ‘none’。
2.如果'display'设置为'none'，用户端必须忽略掉'position'和'float'。在这种情况下，元素不产生框。&
3.即如果'position'设置为'absolute'或'fixed'且‘float’的值不为‘none’，display的值就会被设置为‘block’，所以设置display: float:等同于float:left，display:inline 的属性并未生效。因为用户端会忽略掉对’display‘的设置。float:left和display:inline-block当然是不等同的。&
position:absolute和float会隐式的改变display类型，&不论之前是什么类型的元素（display:none除外），只要设置了position:absolute或float，都会让元素以display:inline-block的方式显示，可以设置长宽，默认宽度并不占满父元素，就算是显示的设置display:inline或display:block，仍然无效。&float在IE6下的双倍边距bug就是利用添加display:inline来解决的&注意一点的是，position:relative并不能够隐式的改变display的类型&
阅读(...) 评论()最近对一些基础知识进行了整理，下面是针对 BFC 的一些整理以及本人对 BFC 的一些理解。
1. 首先，什么是 BFC 呢？
BFC，Block formatting context，直译为“块级格式化上下文”。
在说 BFC 之前，我们首先要弄懂什么是 formatting context？
fomating context：格式化上下文，是W3C CSS2.1规范中的一个概念，拥有一套渲染规则。对内来约束其内块级元素的布局，对外来控制和外部元素的布局。通俗一点的讲，它就是页面中的一块渲染区域，规定了其子元素将如何定位，以及和其他元素的关系和相互作用。
最常见的 Formatting context 有 Block fomatting context (简称 BFC ) 和 Inline formatting context (简称 IFC )。
CSS2.1 中只有BFC和IFC, CSS3中还增加了GFC（GridLayout Formatting Contexts，直译为&网格布局格式化上下文&）和FFC（Flex Formatting Contexts，直译为&自适应格式化上下文&）。IFC、GFC、FFC 在这里就不进行详细解释了。
既然有四种渲染规则，那么我们就需要知道在什么情况下会采用哪种渲染规则，box 作为 css 布局的对象和基本单位，它的类型，由其元素的类型和 display 属性决定。不同类型的 box，会参与不同的 fomating context（一个决定如何渲染文档的容器），以不同的方式渲染。那么，都有哪些类型的盒子呢？
① block-level box : display属性为block, list-item, table的元素，会生成block-level box，参与BFC。
② inline-level box: display属性为inline, inline-block, inline-table的元素，会生成inline-level box，参与IFC。
③ run-in box : run-in : 根据上下文决定对象是内联对象还是块级对象。（CSS3）
block：块级元素，默认不加修饰的情况下块级元素并不会被收缩包裹其内容，其宽会充斥父元素，高度由自身内容撑开（inline 行内元素会“收缩包裹” 其内容，并且会尽可能包紧）。每个块级元素即使设置了宽度，不占满父元素也会自己占据一行，不让其后元素与自己并行。
说了这么多，我们回到正题：
BFC 就是一个独立的渲染区域，规定了Block-level内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
通俗一点的讲， BFC 就是相当于一个把浮动元素框起来并隔离的容器，容器里面的子容器不会影响到外面的元素，使浮动不会溢出。
2. BFC 布局规则
内部的 box 会在垂直方向，一个接一个的放置。
每个元素的 margin box 的左边，与包含块 border box 的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动，也是如此。
BFC 的区域不会与float box 重叠。
BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也是如此。
计算 BFC 的高度时，浮动元素也参与计算
3. 哪些元素会生成 BFC ？
float 的值不为 none
overflow 的值 visible
display 的值为 inline-block、table-cell、table-caption、flex、inline-flex
position 的值为 absolute、fixed
4. BFC 的作用及原理
（1） 自适应两栏布局
position: relative;
width: 300px;
height: 200px;
float: left;
background: #f66;
height: 250px;
background: #fcc;
overflow: hidden;
/* 通过触发main生成BFC， 来实现自适应两栏布局，BFC的区域不会与float box重叠 */
&div class=&aside&&&/div&
&div class=&main&&&/div&
（2） 清除内部浮动
border: 5px solid #fcc;
width: 300px;
overflow: hidden;
/* 触发par生成BFC，那么par在计算高度时，par内部的浮动元素child也会参与计算 */
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
&div class=&par&&
&div class=&child&&&/div&
&div class=&child&&&/div&
（3） 防止垂直 margin 重叠
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
/* 若没有 .wrap ，会发生 margin 重叠，两个p上下之间的距离为30px */
/* 在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。 */
overflow: hidden;
防止垂直margin重叠 */
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 30px;
&p&Haha&/p&
&div class=&wrap&&
&p&Hehe&/p&
因为 BFC 内部的元素和外部的元素绝对不会互相影响，因此，当 BFC 外部存在浮动时，它不应该影响 BFC 内部的 Box 的布局，BFC 会通过变窄而不与浮动有所重叠。同理，当 BFC 内部存在浮动时，为了不影响外部元素的布局，BFC 计算高度时会包括浮动的高度，也因此，避免了 margin 重叠的产生。
想看以上例子的网页实现效果，请点
本文链接：
阅读(...) 评论()BFC、浮动、清除和hasLayout - 推酷
BFC、浮动、清除和hasLayout
BFC——Block Formatting Context，块级格式化上下文，是CSS渲染的一个概念。我们在大多数的使用场景下并没有受到这个概念的影响，或者我们了解表象却不明白原因，所以容易忽视它，但遇到一些“诡异”的排版问题时，了解这个概念能够让我们更好地认清问题的本质。比如本文着重讲的和浮动有关的问题。
产生BFC的条件
以下情况会创建一个BFC：
根元素或其它包含它的元素
浮动 (元素的 float 不为 none)
绝对定位元素 (元素的 position 为 absolute 或 fixed)
内联块 inline-blocks (元素的 display: inline-block)
表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素的 display: table-caption, HTML表格标题默认属性)
&overflow 的值不为 visible的元素
弹性盒 flex boxes (元素的 display: flex 或 inline-flex)
要注意区分BFC和块级元素，它们是不一样的概念，从上面的产生BFC的条件看，并非每个块级元素都会创建BFC。BFC相当于是一个虚拟空间，创造BFC的元素的子元素就处在这个空间中，而如果子元素符合创造BFC的条件，那么它也会创造独立的BFC，它的子孙就处于新的BFC中了。
BFC对于布局的影响
根据w3c的规范，在一个BFC中，盒子(boxes)从BFC的顶端往下，一个挨着一个垂直放置。相邻盒子之间的垂直距离取决于它们的margin属性，同一个BFC中，相邻块级盒子之间的垂直margin值会折叠。这句话包含几个限定条件，边距折叠的分析在以后的文章中再展开，这次仅注意到 边距折叠只发生在同一个BFC中 。
BFC对浮动的影响
理解BFC的概念能够更好地理解浮动和清除时出现的现象。
根据w3c的规范，在BFC中，每个盒子的左外边缘(edge)都会触及BFC的左边缘，甚至浮动元素存在的时候也是这样（尽管盒子的行盒 line boxes 会因为浮动元素而被压缩），除非盒子创建了一个新的BFC。
例1：为了理解上面的话，我们做一个简单的实验，在3个盒子中设置中间的盒子是float:left的，可以看到，浮动元素后面的元素仍然靠着左边缘，尽管文字被挤压了。
.small {width:50 height:50}
.middle {width:100 height:100}
.big {width:150 height:150}
.red {background-color:opacity:.5;}
.yellow {background-color:opacity:.5;}
.blue {background-color:opacity:.5;}
.float {float:left}
.clear {clear:both}
.newbfc {overflow:auto}
&div class=”middle yellow”&&/div&
&div class=”middle red float”&哈哈哈哈哈哈哈哈哈哈&/div&
&div class=”big blue”&哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈&/div&
例2：接下来，给浮动元素后面的div设置overflow:auto，使其创建BFC，于是它跑到浮动元素的右边了。这里选择overflow:auto，因为这个属性自身没有排列布局的功效，但是因为这样设置创建了BFC，最终影响到了它的位置
&div class=”middle yellow”&&/div&
&div class=”middle red float”&哈哈哈哈哈哈哈哈哈哈&/div&
“&哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈&/div&
浮动和清除
clear属性用于清除浮动，它将元素移动到浮动元素的下方。而该属性起作用的元素并不需要是浮动元素的兄弟元素，为了解释这一设定，可以构造出复杂的嵌套来分析其产生特殊布局的原因。不过我们还是把问题说得简单一点，以便于理解。
例3：我们仍然对例1进行一些修改，这一次，我们在蓝色的盒子里放一个小的带有clear属性的盒子，同时再给蓝色的盒子设置一个左边距
&div class=”middle yellow”&&/div&
&div class=”middle red float”&哈哈哈哈哈哈哈哈哈哈&/div&
&div class=”big blue” style=”margin-left:150px”&
&div class=”small yellow
clear “&&/div&
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
结果是不是和你想的一样呢？哈哈。蓝色盒子里的小黄盒子（由于颜色叠加的原因，它变成了不知什么色）左边距离浮动的红盒子那么远，可还是不敢和红盒平起平坐，只能委屈地在红盒的下面。因为蓝盒及其子元素仍然处在先前的BFC中，所以它的clear属性是仍然能和浮动元素发生作用的，这一场景我们常常能在运用浮动时遇到，特别是在蓝盒中也有浮动元素的情况下，如下面例4
&div class=”middle yellow”&&/div&
&div class=”middle red
float “&哈哈哈哈哈哈哈哈哈哈&/div&
&div class=”big blue”&style=”margin-left:150px”&
&div class=”small yellow
float ”&5&/div&
&div class=”small yellow
clear ”&4&/div&
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
我们只是想让div4清除div5的浮动的影响，但是因为红色浮动元素的影响，导致它并没有直接排在div5下边，而是排在红色块下缘的水平线以下。那如何达到我们想实现的效果呢？借用前面说的BFC的知识，我们给蓝色方块创建一个BFC：
&div class=”middle yellow”&&/div&
&div class=”middle red float”&哈哈哈哈哈哈哈哈哈哈&/div&
&div class=”big blue
newbfc ”&style=”margin-left:150px”&
&div class=”small yellow float”&5&/div&
&div class=”small yellow clear”&4&/div&
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
创建BFC有很多方法，都会产生一些副作用，所以按照实际需求选用一个即可。此处也可以选择display:inline-block触发BFC，而保持display:visible的效果，但也会引起其它的副作用，读者可以尝试一下。
clear元素的边距和clearance
最后介绍一下clearance。清除了浮动的元素，其margin-top值产生的效果可能在你的意料之外，我们继续修改例5，给方块4设置margin-top值为10px，-10px，60px看看.
可以看出，margin-top设为10px和-10px都“没有作用”，利用开发者工具看元素的包围情况，可以看到方块4的上边距并没有把它和方块5拉开，好像是举着一根棍子，试图够着蓝色方块的上边缘，可以想象这跟棍子足够长的话就能抵到上边缘，并把方块4顶开（如将margin-top设为60px）。而中间还有的40px的空间就是clearance。
根据w3c的规范，clearance抑制边距折叠，并填充元素margin-top之上的空间，将元素在垂直方向推过浮动元素。它的值恰好让元素的边沿和被清除的浮动元素的下外边沿水平。我们在开发的时候不需要去计算clearance，只需要知道出现这种现象的原因是什么即可。
IE6,7下的效果
IE8以上的显示效果与w3c的规范一致，但在IE6,7（标准模式）下，显示效果又有所不同。造成这样的效果的原因一方面是由于其自身的bug，另一方面是由Layout（布局）造成的。我们先不讨论Layout，但是需要对例子做一些修改，我们把蓝盒的width和height样式属性去掉，通过增加其内部的文字把蓝盒撑大，并把浏览器窗口缩小以便看得更容易。由于IE6和IE7的显示效果差不多，如果没有太大的差别，我们就只用IE6举例。
哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
其显示效果和例1差不多。然后我们看看例2在IE6下的效果：
哈哈哈哈哈哈哈哈哈哈
newbfc&& 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
通过设置overflow:auto，在IE6下无效，在IE7下却能显示出创建了新的BFC后的效果。
哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
咦，好像出现了类似bug的东西。拥有clear属性的方块不但自己跑了下来，还把外层的蓝色方块也拉了下来。嗯，其实这里是发生了边距折叠，我们可以给蓝块设置一个border-top来试验一下
哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
但这里的边距折叠是IE6、7的一个bug，因为根据w3c规定，clear元素不会发生边距折叠。
接下来看看例4，这个表现和预想的一致
例5在IE6和IE7下也是有差别的，IE7同样能显示出创建新bfc后的效果，而IE6却没有变化
最后我们看看clearance在IE6、7下的表现如何
在IE6、7下根本没有clearance的概念，它的行为却更符合我们一般的认识。由于IE6、7和其它浏览器的这一差别，
我们对待clear元素要更加慎重一些，尽量避免需要专门给IE6、7做hack的情况
最后我们看看为什么newbfc这个class在IE7下似乎是生效的，而在IE6下却不生效。这就引出IE6、7下特有的概念——hasLayout
hasLayout是在IE6、7下特有的概念，在IE8以后就废弃了。一个元素触发hasLayout的效果类似于其创建了新的BFC。
那么要如何触发hasLayout呢？默认拥有布局的元素有：
html，body，table，tr，th，td，iframe，object, applet，img，hr，input，button，select，textarea，fieldset，legend等。
设置以下属性会使一个元素拥有布局：
position:absolute
float:left or right
display:inline-block
width:any value other than auto
height:any value other than auto
zoom:any value other than normal
writing-mode:tb-rl
IE7还可以通过以下属性设置hasLayout：
overflow:hidden or scroll or auto
overflow-x:hidden or scroll or auto
overflow-y:hidden or scroll or auto
min-width:any value other than auto
max-width:any value other than auto
min-height:any value other than auto
max-height:any value other than auto
可以看出，在上面的例子中，设置overflow:auto是可以在IE7中触发hasLayout的，而在IE6中不行，不过只需要给元素设置width或height属性就可以让其拥有布局。所以我们在布局的时候，为了达到浏览器显示的一致性，往往需要考虑
同时触发hasLayout以及创建BFC
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致}