设置了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
不动。
但如果是在
content
中设置属性
margin-top:50px
，虽然
content
向下移动了50px的距离，但是
left
居然跟着一起下去了,这是什么情况？
left
设置了
float:left
后不是已经脱离文档流了吗？如果在
content
中设置
float:left
后，
left
又会回到顶上...为什么？
精神病还没好
9 years, 3 months ago
Answers
<!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的浮动.
卖萌什么的
answered 9 years, 3 months ago
<!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如果要用则同一行同级其他元素全都要使用
xusiji
answered 9 years, 3 months ago
有两个要点。
一是垂直外边距合并。
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
。这可以很好的避免垂直外边距合并带来的困惑。
小吐槽点一枚
answered 9 years, 3 months ago