开发者社区> 问答> 正文

设置了float的元素会随着后面未设置float的元素移动而移动。望各位前辈不吝赐教!

想做一个左侧固定220px,右侧随屏幕大小自适应的的布局,对于 float的使用 有些困惑,

<!DOCTYPE html>
<html>
<head>
    <title>左侧固定,右侧实现随屏幕宽度大小自适应</title>
    <meta charset="utf-8">
    <style type="text/css">
    *{margin: 0;padding: 0;}
    left {background-color: green;width: 220px;float: left; }
    content { width: 100%;border: solid red 1px;}
    contentInner {margin-left: 220px;background-color: orange;}    
    </style>    
</head>
<body>
<div id="left">Left Sidebar</div>
<div id="content">
<div id="contentInner">Main Content</div>
</div>
</body>
</html>

关于float的问题(以下各div块都用其id指代),
如果在left中设置属性margin-top:50px。left会向下移动50px距离,content不动。
screenshot
但如果是在content中设置属性margin-top:50px,虽然content向下移动了50px的距离,但是left居然跟着一起下去了,这是什么情况?
screenshot
left设置了float:left后不是已经脱离文档流了吗?如果在content中设置float:left后,left又会回到顶上...为什么?

展开
收起
杨冬芳 2016-06-03 14:18:45 2090 0
1 条回答
写回答
取消 提交回答
  • 码农|Coder| Pythonista

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

    <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。这可以很好的避免垂直外边距合并带来的困惑。

    2019-07-17 19:26:34
    赞同 展开评论 打赏
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载