先看代码,上效果图:
.parent {
margin-top: 200px;
width: 200px;
height: 200px;
background: red;
}
.child {
margin-top: 50px;
width: 100px;
height: 100px;
background: black;
}
margin在垂直方向上的使用有上下排列,跟内嵌两种情况,上面属于内嵌。
parant的margintop=200px,正常效果,但是child的margintop=50px却没有给到我们预期的效果,这是为什么呢?
可以理解为这是css的bug!不用纠结为什么,只知道怎么解决就可以了。下面总结了解决这种margin垂直方向塌陷的几种方式:
- border,给parent加上border,就是说child有了顶部的参考了,所以他的margintop就起效
- overflow: hidder
- position:absoulate
- float: left/right
- display:inline-block
除了border的方式外的(overflow、position、float、display) 这几种方式为什么能够解决这个问题呢?这时候就该说到BFC(block fotmat context)了,这东东我的理解就是合模型的一种绘制方式,他与原本的绘制方式只有微乎其微的不同点,但恰恰就是那么一点不同刚好就能解决了塌陷的问题,所以我们只要触发BFC这种机制就好了;而上面说的
overflow: hidder
position:absoulate
float: left/right
display:inline-block
这些属性能够触发出BFC机制,所以问题就这样被解决了。