以更好的 css 方式浮动元素 <br clear="both"/>？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4673671/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
floating elements <br clear="both"/> in a better css way?
提问by matt
I have a few floating elements like a sidebar that floated besides a content area. If I don't add a <br clear="both"/>at the end of the sidebar, then footer and parts of the background get floated weird.
我有一些浮动元素，例如在内容区域之外浮动的侧边栏。如果我不在<br clear="both"/>侧边栏的末尾添加 a ，那么页脚和部分背景会变得很奇怪。
Any quick solution I missed to think of?
我没有想到的任何快速解决方案？
Thank you.
谢谢你。
Edit:For example,?I want the borders to have no gaps and the backgrounds should have no spaces either. Should just look like two sections: 1) content with sidebar 2) footer
编辑：例如，？我希望边框没有间隙，背景也应该没有空格。应该看起来像两个部分：1) 侧边栏内容 2) 页脚
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>layout</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
#main {
background:#cfcfcf;
}
.inner {
margin: 0 auto;
padding: 96px 72px 0;
width: 1068px;
border-color: #000;
border-style: solid;
border-width: 0 1px;
color: #3C3C3C;
}
.post {
width: 705px;
background:#999;
float:left;
}
#comments, #respond {
background:#999;
}
#sidebar {
background:#777;
}
#footer {
clear:both;
background:gray;
}
</style>
</head>
<body>
<div id="main">
<div class="inner">
<div id="post" class="post">
<h2>Lorem Ipsum Test Page</h2>
<div class="entry">
<p>Lorem ipsum sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div> <!-- entry -->
</div> <!-- post -->
<div id="sidebar">
<h2>Meta</h2>
<ul>
<li>Login</li>
<li>Anything</li>
</ul>
<h2>Subscribe</h2>
<ul>
<li>Entries (RSS)</li>
<li>Comments (RSS)</li>
</ul>
</div> <!-- sidebar -->
</div> <!-- inner -->
</div> <!-- main -->
<div id="footer">
<div class="inner">
Something
</div> <!-- inner -->
</div> <!-- footer -->
</body>
</html>
回答by Jim
You can set the containing elements overflowproperty to something other than visible.
您可以将包含元素overflow属性设置为visible.
回答by Dave
To be honest, I wouldn't try to get around it. You could put the clear in the footer as other people have suggested; but you aren't guaranteed that other parts of your html won't be improperly floated or blocked. If you adopt a policy of only clearing elements when they mess up due to floats in a random part of your html; you might make the habit of always doing that. Instead, the following is an example of a style which usually guarantees that other elements won't be improperly floated:
老实说，我不会试图绕过它。您可以按照其他人的建议在页脚中清除；但您不能保证 html 的其他部分不会被不正确地浮动或阻止。如果您采用仅在元素因 html 的随机部分浮动而混乱时才清除元素的策略；你可能会养成总是这样做的习惯。相反，以下是一个样式示例，它通常可以保证其他元素不会被不当浮动：
<div>
<div style="float:right;"></div>
<div style="float:right;"></div>
<!--Add a clear div as last sibling of any floated elements-->
<div style="clear:both;"></div>
</div>
Also, I would use a empty div instead of br. Thats just me though.
另外，我会使用一个空的 div 而不是 br。那只是我。
So drawing from your example:
所以从你的例子中提取：
</div> <!-- post -->
<!-- insert empty clear div hear -->
<div style="clear:both;"></div>
<div id="sidebar">
回答by Jacob
You could just make the footer so it has a style with clear: both.
您可以制作页脚，使其具有clear: both.
回答by Matthew Rapati
The correct way is to clear the left and right for the next element.
正确的方法是为下一个元素清除left和right。
So on the footer you could add:
所以在页脚你可以添加：
#footer {
clear: both;
}
This would force the footer to go down to the next line, and it is the 'proper' way. It will also be easier to change your design later because you won't have to go change markup, just the CSS.
这将迫使页脚向下移动到下一行，这是“正确”的方式。以后更改设计也会更容易，因为您不必更改标记，只需更改 CSS。
回答by tdammers
display: inline-block;is really nice. Too bad IE doesn't really support it.
display: inline-block;真的很好。太糟糕了 IE 并不真正支持它。
