<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值 。
时间: 2024-12-28 05:56:28