css - 子div设置margin-top没效果，但给子div加float:left就有效果，这是为什么？
本文介绍了css - 子div设置margin-top没效果，但给子div加float:left就有效果，这是为什么？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>margin</title>
</head>
<body>
<style>
#container{
background-color: red;
width:2000px;
height:600px;
}
#div1{
background-color: blue;
width:500px;
height: 100px;
margin-top:10px;
}
</style>
<div id ="container">
<div id="div1"></div>
</div>
</body>
</html>目的是想让div1的上边和container的下边距离是10px，但是用firefox和IE8发现都没有效果，但是如果给div1加上float:left之后就有效果了，这是为什么？ 是我哪里理解错了吗？谢谢。
解决方案
这是因为 margin 会 collapse （坍塌）。
发生坍塌的条件。
简单理解就是竖向、块元素、同个 BFC、邻近。
加 float 相当于打破了同个 BFC。
打破邻近可以是content（隔着其它节点）、padding、border、clearance（清除浮动时加上的空白）。
例子可以换为给 #container 加 padding-top。
这篇关于css - 子div设置margin-top没效果，但给子div加float:left就有效果，这是为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
