互相嵌套块级元素, 如果给子元素设置margin-top会作用在父元素身上,这种现象就叫嵌套块级元素塌陷 解决办法:
-
1 给父元素设置 padding-top或 border-top -
2 给父元素设置 overflow: hidden; 这里不是溢出隐藏的意思)这里是将盒子转为BFC(块级格式化上下文),(独立的布局区域,不会受到内外因素干扰) -
3 把子元素转换为行内块 display: inline-block; -
4 浮动 绝对定位 相对定位的 盒子不会有嵌套块级元素外边距塌陷现象
