python之边距折叠

Html 经常出现的一个外边距折叠，可能有人的不太理解，或者说不知道怎么解决、我们来着重来看下：

当两个 div 盒子模型连续出现的时候并且同时应用了一个 margin 外边距，会出现边距重叠的现象：

.Div {width:150px;   # 定义公共的盒子样式

Height:150px;

Margin:20px; # 给四边都添加上了 20px 的边距

}

.top{background:red; # 定义第一个盒子为红色 }

.bottom{background:blue; # 定义下面的盒子为蓝色 }

然后这时就出现了边距折叠（合并），按理的话应该两个盒子垂直相距是 40px ，然而这会出现上下两个盒子，中间相隔的边距谁的边距大就会被应用、 ( 两个正值取最大，负值取最大负值，一正一负相加 )

为什么会重叠：在早期只有文字 图像 没有什么布局，而且边距会很稀疏 所以出现了 margin 重叠，他并不是一个 bug 而且为了更好的 排版 ，可以通过 overflow ： hidden ； 让它变为 非块状格式化上下文 BFC （ Block Formatting context ）

W3C 中讲到 BFC 的特性：

什么是 BFC ：

在 mozilla 上看到：是 页面 CSS 视觉渲染(visual CSS rendering)这个过程中的一个概念。它是决定块盒子的 布局及浮动 元素相互影响的一个因素。 可以理解为要被渲染前的一个区域，它这个区域有自己的特性、

display 属性 决定了这个 box 会不会单独渲染，：

block-level box:display 属性为 block, list-item 会被仍在 BFC 中 单独渲染

inline-level box:display 属性为 inline, inline-block, inline-table 会被仍在 BFC 中 单独渲染

BFC 特性：

1. 从顶部开始 ，一个接一个地放置。

2. Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠

3. 每个元素的 margin box 的左边， 与包含块 border box 的左边相接触 ( 对于从左往右的格式化，否则相反 ) 。即使存在浮动也是如此。

4. BFC 的区域不会与 float box 重叠。

5. BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素 ，外面也不会影响到里面 。

6. 计算 BFC 的高度时，浮动元素也参与计算 。

当我们知道为什么要折叠边距，以及特性之后我们就可以开始实战了。

如图： div 中装了 hr 一个块级元素，但是 hr 边距没有顶着 div

.hr{width:50px;

height:90px;

background:pink;

}