盒模型布局常见问题总结

盒模型布局常见问题：

1.BFC内部的盒子会垂直排列，即一个盒子总是会占据一行，即使两个盒模型的宽度加起来没有父元素宽，都会分为两行显示。--block元素的特点

2.属于同一BFC的相邻盒子的垂直margin会重叠。--使用一个BFC盒子包裹其一

3.盒子内部元素的 margin-box 左边会与包含块 border-box 的左边相接，即使存在浮动也如此。--触发BFC解决

4.盒子内部元素浮动时，盒子高度没有被撑开。--触发BFC解决

demo页面请点击

注：默认只有body元素触发BFC（块级作用域上下文）

css盒模型

盒模型特点：

1. 默认宽度为父元素的宽度

2. 默认高度为子元素的高度

3. 可以指定高度和宽度

BFC特点：

1. BFC不与float box叠加；

2. BFC内外部元素互不影响；

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