盒模型布局常见问题:
1.BFC内部的盒子会垂直排列,即一个盒子总是会占据一行,即使两个盒模型的宽度加起来没有父元素宽,都会分为两行显示。--block元素的特点
2.属于同一BFC的相邻盒子的垂直margin会重叠。--使用一个BFC盒子包裹其一
3.盒子内部元素的 margin-box 左边会与包含块 border-box 的左边相接,即使存在浮动也如此。--触发BFC解决
4.盒子内部元素浮动时,盒子高度没有被撑开。--触发BFC解决
demo页面请点击
注:默认只有body元素触发BFC(块级作用域上下文)
盒模型特点:
1. 默认宽度为父元素的宽度
2. 默认高度为子元素的高度
3. 可以指定高度和宽度
BFC特点:
1. BFC不与float box叠加;
2. BFC内外部元素互不影响;
3. 计算BFC高度时,浮动元素也参与计算。