- margin塌陷:当父元素包裹着子元素时,垂直方向的margin取两者之中较大的数值。
解决方法:
1.给父元素设置一个border-top(不建议采用)
2.bfc(block format context --- 块级格式化上下文)
如何触发一个盒子的bfc:
1.position: absolute;
2.display: inline-block;
3.float: left / right;
4.overflow: hidden; (隐藏溢出部分)
利用bfc改变父元素渲染规则,针对需求选取4种触发bfc的方法解决塌陷问题
- margin合并:两个兄弟元素垂直方向上的margin会合并,margin会取两者之中较大的值。
解决方法:给其中一个或两个元素都增加一个父级,并用bfc改变父级元素的渲染规则(一般允许存在margin合并,可用计算方法实现所需效果)
网友评论