开发者社区> 问答> 正文

为什么html在body中的div设置margin会把float的div也下移,代码见问题详情

杨冬芳 2016-06-17 18:38:58 908
<body>
<div></div>
<div style="width:400px; height: 500px; float: left;">left</div>
<div style="width:700px; height: 700px; float: right;">right</div>
<div style="height: 20px;margin-top: 50px;">clear</div>
</body>

<body>
<div style="width:400px; height: 500px; float: left;">left</div>
<div style="width:700px; height: 700px; float: right;">right</div>
<div style="height: 20px;margin-top: 50px;">clear</div>
</body>
分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:43:28

    有两个要点。

    一是垂直外边距合并。div#content元素设置了margin-top,由于它和它的父元素(这里就是body)之间并没有间隙(例如border、padding),会发生垂直外边距合并。因此,此时margin-top相当于作用在了body上,所以浮动元素div#left的初始排版位置就会改变到那个地方。你可以试试为body增加padding-top: 1px;,这时候就有了间隙,也就不会发生合并。

    二是浮动元素的特性。浮动元素在垂直外边距合并的规则里,算作有间隙的情况。因此,div#left元素设置margin-top并不会发生合并。

    你可以简单看看CSS 外边距合并。

    要实现左侧固定,右侧随屏幕大小适应的布局,我认为比较合适的写法是:

    <body>
        <div class="l-container">
            <div class="l-sidebar"></div>
            <div class="l-main"></div>
        </div>
    </body>
    

    css:

    .l-container:after{
        display: table;
        clear: both;
        content: "";
    }
    .l-sidebar{
        float: left;
        width: 220px;
    }
    .l-main{
        margin-left: 220px;
    }

    如果需要上边距,可以考虑在各部分内部增加div,设置padding-top。这可以很好的避免垂直外边距合并带来的困惑。

    0 0
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

推荐文章