“浮动：右；”与“浮动：左”；左边距：Ypx”对于 2 列布局，最佳实践是什么？
我正在创建一个 2 列布局，我想知道对于第二列使用“float: right;”是否有实际差异与“浮动：左；左边缘：Ypx”。
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#main {
width: 900px;
margin: 0 auto;
}
#right {
float: left;
width: 600px;
}
#left {
float: left;
width: 280px;
margin-left: 20px;
}
</style>
</head>
<body>
<div id="main">
<div id="left">Content of the left column
</div>
<div id="right">Content of the right one
</div>
</div>
</body>
</html>
I am creating a 2 columns layout and I was wondering if there is a practical difference between using, for the second column, "float: right;" vs. "float: left; margin-left: Ypx".
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#main {
width: 900px;
margin: 0 auto;
}
#right {
float: left;
width: 600px;
}
#left {
float: left;
width: 280px;
margin-left: 20px;
}
</style>
</head>
<body>
<div id="main">
<div id="left">Content of the left column
</div>
<div id="right">Content of the right one
</div>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
唯一真正的区别是向右浮动会导致 div 粘在容器的最右边缘。仅当您的容器 div 大小发生变化时，这才重要。有些布局会随着浏览器视口的大小而缩放，或者会随着 JavaScript 的变化而动态变化。在您的情况下，您有一个静态设置的宽度，因此两种技术之间没有区别。
唯一需要注意的其他区别是 DOM 中跟随右侧浮动 div 的任何其他向左浮动的 div。如果有空间，这些div将向左浮动，并出现在向右浮动的div的左侧。
The only real difference is that float right will cause that div to stick to the far right edge of the container. This only matters if your container div will change size. Some layouts scale with the size of the browser's viewport, or will change dynamically with javascript. In your case, you have a statically set width, so there is no difference between the two techniques.
The only other difference to look out for is any other divs that float left that follow your right floating div in the DOM. If there is room, these divs will float left, and appear to the left of the div that floats right.