为什么不会对齐?

Question

.a,
.b {
    padding: 100px;
    background: #ccc;
    margin: 20px;
}
.a {
    float: left;
    background: pink;
} 

<div class="a"></div>
<div class="b"></div>

Answer 1

CSS世界有句话, 大致意思是, 父子嵌套, 子级的 margin-top 会代替父级出力,

所以相当于 body 设置了margin-top , 然后 pink 又以body为起点.

Answer 2

你给.a也设置了margin

Answer 3

a有margin-top的20px

Answer 4

.a {
    margin-top: 0;
    float: left;
    background: pink;
} 

Answer 5

把.a, .b{
...
}中的margin:20px去掉

Answer 6

两个知识点。1，可以查下浮动元素的上边界的位置。这里的 a 上边界应该是与body的第一个行盒的上边界对齐。在 body 下加一个 span 元素就很明显了。2，当 body 只有 block 子元素的时候，默认的行在哪。

Answer 7

margin融合，左右margin可融合，上下margin不可融合

Answer 8

margin融合引起的，是body和div.b的margin-top发生融合，及body的margin-top为20px，div.a为浮动元素，margin不会和父元素（body）融合，所以出现这种情况

Answer 9

去掉margin:20px