http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
上文已经将的很详细了，大家可以看看！
这里提另外一个相关问题:
http://blog.csdn.net/duran1986/article/details/6930967我在这篇文章中找到了答案；
问题是：有时候我们调子元素的margin-top，是想和父元素拉开距离，可事实是和父元素没拉开距离，反而是父元素与上面拉开了距离，感觉子元素的设置在父元素上起作用，为什么呢？
这是css2.1盒模型中规定的内容——Collapsing margins：
In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。
所以这是规定，你想用它（css）就要符合它的规定
分享到：
相关推荐
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box（块级元素）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干. 通俗地来说：创建...
BFC是块级格式化上下文，是Web页面中块级元素渲染时的一种内部环境，它决定了元素如何对其内部和外部的元素进行布局。了解BFC有助于优化页面的布局和防止浮动元素引起的问题。 项目【BFC-Book-Store】可能是用...
HTML中的BFC（Block Formatting Context，块级格式化上下文）是页面布局中一个非常重要的概念，它定义了块级元素如何在其包含体内布局。理解BFC可以帮助我们更好地控制网页的布局，解决浮动元素引起的问题，以及实现...
CSS布局和块级格式上下文（Block Formatting Context，简称BFC）是理解CSS布局机制的关键概念。BFC是一个独立的布局环境，它有自己的渲染规则，能够决定内部元素如何排列以及与外部元素如何交互。在CSS中，BFC主要...
在前端开发中，BFC（Block Formatting Context，块级格式化上下文）是一个非常重要的概念，它关乎到网页布局和元素间的相互影响。面试中，理解并能灵活运用BFC的知识是衡量开发者技术水平的一个重要指标。 首先，...
BFC（Block Formatting Context，块级格式化上下文）是CSS布局中的一个重要概念，对于理解和解决网页布局问题有着至关重要的作用。本篇将深入探讨BFC规范，帮助初学者从入门到精通。 BFC全称为Block Formatting ...
BFC，全称为Block Formatting Context（块级格式化上下文），是CSS中一种特殊的渲染规则，它决定了内部元素如何布局以及与其他元素的关系和相互作用。在理解BFC之前，我们需要先了解一些基本的概念： - **Block-...
在前端开发中，理解和掌握文档流（Document Flow）与块级格式化上下文（Block Formatting Context，简称BFC）是构建网页布局的基础。这两个概念对于布局的控制、元素的定位以及盒模型的理解至关重要。 首先，我们来...
块级格式化上下文（BFC）： 1.创建BFC ①html根元素 ②设置浮动 ③设置定位 ④设置display ⑤设置overflow ⑥弹性布局 flex 2.利用BFC解决问题 ①解决外边距的塌陷问题(垂直塌陷) ②利用BFC解决包
官方给出的BFC解释是这样的，浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级...
块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。 我们先了解一个名词：BFC（block formatting context），中文为“块级格式化上下文”。 先...
本文将介绍两种实现水平垂直居中的方法，并对BFC（块级格式化上下文）的布局规则进行详细的解释。 方法一：使用相对定位和绝对定位 第一种方法是使用相对定位和绝对定位来实现水平垂直居中。在这种方法中，我们...
- **层叠上下文定义**：层叠上下文（Stacking Context）是CSS中用于控制元素堆叠顺序的一个概念。它决定了元素在Z轴上的相对位置。 - **创建层叠上下文的条件**： - 根元素（HTML）。 - 设置了 `position` 为 `...
BFC：块级格式化上下文 BFC的布局规则 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。 计算BFC的高度时，浮动元素也参与计算。 ...
2. BFC（Block Formatting Context，块级格式化上下文） BFC是Web页面的可视化CSS渲染的一部分，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到页面布局时，了解和运用BFC是非常重要...
接着，BFC（块级格式化上下文）是页面中的一个独立渲染区域，可以阻止内外元素的定位相互影响。BFC的触发条件包括：根元素、position属性为absolute或fixed、display属性为inline-block、table、float不为none、...
BFC（块级格式化上下文） BFC 是一个独立的渲染区域，只有 Block-level box 参与。它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。 BFC 的布局规则包括： * 内部的 Box 会在垂直方向，一...
BFC（Block Formatting Context），即块级格式化上下文，是指在CSS布局中一个独立的渲染区域，它遵循一套独立的渲染规则。当一个元素创建了一个新的BFC时，其内部的子元素将遵循这一规则进行布局，并且这些子元素...