css margin 不管用
设置了margin却没有效果，这是因为产生了块级格式上下文（BFC），下面就来说说解决方法吧。
BFC的生成
满足下列css声明之一的元素便会生成BFC
● 根元素
● float的值不为none
● overflow的值不为visible
● display的值为inline-block、table-cell、table-caption
● position的值为absolute或fixed
BFC的约束规则
浏览器对BFC这块区域的约束规则如下：
生成BFC元素的子元素会一个接一个的放置，垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。生成BFC元素的子元素中，每一个子元素左外边距与包含块的左边界相接触，（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.A { height: 50px; margin-top: 50px; width: 50px; background-color: red; }
.B { height: 200px; margin-top: 100px; width: 200px; background-color: green; }
.C { height: 50px; margin-top: 50px; width: 50px; background-color: blue; }
</style>
</head>
<body>
<div class="A">
A
</div>
<div class="B">
<div class="C">
C
</div>
</div>
</body>
</html> 
解决方法：
1. 设置元素为overflow:hidden
2. 在浮动元素下面放一个属性clear：both的元素
3. 为浮动元素设置 ::after
::after {
content: ""; //设置内容为空
height: 0; //高度为0
line-height: 0; //行高为0
display: block; //将文本转为块级元素
visibility: hidden; //将元素隐藏
clear: both //清除浮动
}更多CSS相关技术文章，请访问CSS3答疑栏目进行学习！
以上就是css margin 不管用的详细内容，更多请关注易知道|edz.cc其它相关文章！
