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

发布于 2022-09-01 17:19:23 字数 1472 浏览 33 评论 0

想做一个左侧固定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不动。
图片描述
但如果是在content中设置属性margin-top:50px，虽然content向下移动了50px的距离，但是left居然跟着一起下去了,这是什么情况？

left设置了float:left后不是已经脱离文档流了吗？如果在content中设置float:left后，left又会回到顶上...为什么？
图片描述

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

等往事风中吹 2022-09-08 17:19:23

有两个要点。

一是垂直外边距合并。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

我喜欢麦丽素 2022-09-08 17:19:23

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

需要清除left的浮动.

回复收藏 0

策马西风 2022-09-08 17:19:23

<!DOCTYPE html>
<html>
<head>
    <title>左侧固定，右侧实现随屏幕宽度大小自适应</title>
    <meta charset="utf-8">
    <style type="text/css">
    *{margin: 0;padding: 0;}
    #left { width:220px; background-color: green;width: 220px;float: left; }
    #content { width: 100%;border: solid red 1px;}
    #contentInner {float:left; 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如果要用则同一行同级其他元素全都要使用

回复收藏 0