Html 容器 div 忽略浮动元素的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2442934/
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
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 02:29:58 来源:igfitidea点击:
Container div ignores height of floated elements
提问by Thomas
Ok, so this seems like a really silly problem but I can't get my container div to inherit the height of the floated elements inside of it. Since I need to center the container div, I can't use float to fix this problem. Here is my css:
好的，所以这似乎是一个非常愚蠢的问题，但我无法让我的容器 div 继承其内部浮动元素的高度。由于我需要将容器 div 居中，因此无法使用 float 来解决此问题。这是我的CSS：
#container {
margin: 0 auto;
width: 1000px;
border-left: 1px solid #f1f1f1;
border-right: 1px solid #f1f1f1;
border-bottom: 1px solid #f1f1f1;
}
#focus {
padding-left: 23px;
width: 977px;
padding-top: 20px;
padding-bottom: 23px;
border-bottom: 1px solid #f1f1f1;
float: left;
}
.rslider {
float: left;
width: 600px;
margin-left: 15px;
}
.welcome {
float: left;
width: 300px;
}
Html:
网址：
<div id="container">
<div id="logo_block">
<a href="#"><img src="img/logo.jpg" alt="" /></a>
</div>
<div id="focus">
<div class="welcome">
<h1>All About This Page</h1>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, liquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
</div>
<div class="rslider">
<img src="img/slider_image.jpg">
</div>
</div>
</div>
Any ideas?
有任何想法吗？
