为什么调html中margin没有变化,css margin 不管用

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(如它自身也是一个浮动元素)

.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; }

解决方法：

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答疑栏目进行学习！