二列布局时的发现-CSDN博客

<div>

　　<div style="float:left;width:120px;background-color:red;">
　　　　<p>左侧div</div>

　　</div>

　　<div style="width:70%;margin-left:120px;background-color:pink;">
　　　　<p>右侧div</div>

　　</div>

</div>

执行结果：左侧div的右边框会紧挨着右侧div的左边框，但它们之前没有空隙，

margin-left:120px; 亲没有让左右2边的div之前产生120px的左外边距。原因：因为左div进行了浮动

float:left; ，浮动后脱离文档流，紧靠在边缘，而右侧div并没有进行浮动，会根据顺序文档流继续排版下去，所以当设置

margin-left:120px; 时，是将右侧的div，从body的左边框处为起始，添加了左处边距。所以，正好是等于右侧div的宽度，所以就正好紧挨在一起。
如果 右侧div的左外边距大于左侧div的宽度时，大于多少px值，则会将左侧div与右侧div之间添加间隙，间隙的值便是 右侧div - 左侧div 的px值 。

转载于:https://www.cnblogs.com/JaneBlog/p/6121497.html