二列布局时的发现

<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值 。
posted @ 2016-12-01 13:15  前端开发小姐姐  阅读(214)  评论(0编辑  收藏  举报