CSS之盒模型（二）

根据盒模型解释边距重叠

代码如下：

CSS 盒模型

html *{

padding:px;

margin:px;

}

#parent

{

background:#ff0000;

}

#child

{

height:100px;

margin-top:10px;

background:#009dff;

}

那么父元素 section 的高度是多少呢？

在Chrome Computed 中可以很明显的看到父元素section 的高度是100px，但给父元素增加一个overflow 后 ，父元素高度变为了110px 。

其实，添加一个overflow ，就是给父级元素创建了一个BFC（块级格式化上下文）边距重叠解决方案

1、BFC是什么？

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

2、BFC原理 ？

在BFC元素的垂直方向的边距会发生重叠

BFC的区域不会与浮动元素Box重叠（用来清除浮动不布局）

BFC在页面上是一个独立的容器，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素

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

3、如何创建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)

4、BFC 应用场景

4.1 如果在页面布局中不想有重叠， 就给子元素添加一个父元素，这个父元素创建一个BFC 。

#margin{

background:#ff0000;

overflow:hidden;

}

#margin>p{

margin:5px auto30px;

background:#1aff1e;

}

1

2

3

#margin{

background:#ff0000;

overflow:hidden;

}

#margin>p{

margin:5px auto30px;

background:#1aff1e;

}

1

2

3

4.2 布局BFC应用

#layout{

background:#009dff;

}

#layout.left{

float:left;

width:300px;

height:100px;

background:#ff0000;

}

#layout.right{

height:110px;

background:#1aff1e;

}

zuo

you

使用float，当右侧div 高度高于左侧时，右侧div会侵入左侧的div ,很显然这种布局不符合我们的目的，这时，我们就需要给右侧div 创建一个BFC以解决这种困境。

#layout{

background:#009dff;

}

#layout.left{

float:left;

width:300px;

height:100px;

background:#ff0000;

}

#layout.right{

height:110px;

background:#1aff1e;

overflow:hidden;

}

zuo

you

4.3 BFC 不与float 重叠

#float{

background:#ff0000;

}

#float.float{

float:left;

}

浮动元素

父级元素遭遇浮动子元素的时候，高度计算没有包含进来。将父元素设为BFC时，子元素的浮动高度也会参与高度计算来。

给父元素创建一个BFC

#float{

background:#ff0000;

overflow:hidden;

}

#float.float{

float:left;

}

浮动元素