我有一个简单的网站，具有经典元素:容器、页眉、内容和页脚。容器有一个背景颜色，它覆盖了网站的全部内容(包括页眉、内容和页脚)。由于某种原因，这不适用于容器内的 float 元素。
我在 StackOverflow 找到了解决方案，但感觉不对。解决方法是设置{ display: table; } 放到容器 ID 上。
页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style>
body
{
background-color: #999;
font-family: Tahoma;
font-size: 12px;
font-style:normal;
font-variant:normal;
font-weight:normal;
margin: 0px;
padding: 0px;
}
h1
{
color: green;
font-family:Tahoma;
font-size: 26px;
font-weight: bold;
margin: 5px 0;
text-indent: 10px;
width: 100%;
}
#container
{
background: #FFF;
margin: 0 auto;
width: 950px;
position: relative;
}
#header
{
position: relative;
height: 100px;
width: 950px;
}
#content, #content-ext
{
float: left;
margin: 0;
width: 950px;
}
#nav
{
float: left;
padding: 10px 10px 10px 0;
width: 200px;
}
ul#menu
{
cursor: pointer;
display: block;
list-style: none outside none;
margin: 0 auto;
padding: 0;
text-align: left;
width: 200px;
}
ul#menu li
{
margin: 0;
padding: 0;
}
ul#menu li a
{
color: #111;
display: inline-block;
height: 50px;
font-size: 18px;
line-height: 60px;
margin: 0 auto;
padding: 0 0 0 10px;
text-decoration: none;
width: 100%;
}
#mainImg
{
background: #111;
height: 150px;
float: right;
margin: 0 0 20px 0;
width: 710px;
}
#main-content
{
float: right;
width: 710px;
}
#extra
{
float: left;
width: 500px;
}
#contact
{
float: left;
width: 450px;
}
#footer
{
color:#999;
height:20px;
width:950px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>test</h1>
</div>
<div id="content">
<div id="nav">
<h1>Menu</h1>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="mainImg"></div>
<div id="main-content">
<h1>Welkom</h1>
<p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed arcu arcu, a interdum metus. Aenean vel libero nulla. Nulla facilisi. Maecenas malesuada libero a ante vulputate vestibulum. Cras id neque vitae lectus luctus tempor non non risus. Morbi aliquam porttitor facilisis. Sed pulvinar erat sit amet est auctor tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget arcu lorem, non accumsan ipsum. Donec venenatis adipiscing massa, sed molestie augue ullamcorper et.</strong>
<br/><br/>
Morbi id eros vitae risus tristique bibendum. Quisque nec metus sit amet nunc tincidunt vehicula sit amet non nibh. Nullam risus orci, porttitor ut malesuada vel, volutpat eget sapien. Proin tempus nunc sit amet ligula viverra hendrerit. Donec tempus tristique risus. Fusce at semper est. Etiam ligula est, varius ut tempus at, laoreet bibendum eros. In hac habitasse platea dictumst.</p>
</div>
</div>
<div id="content-ext">
<div id="extra">
<h1>Extra</h1>
<p>Quisque nec metus sit amet nunc tincidunt vehicula sit amet non nibh. Nullam risus orci, porttitor ut malesuada vel..</p>
</div>
<div id="contact">
<h1>Contact</h1>
<p>Quisque nec metus sit amet nunc tincidunt vehicula sit amet non nibh. Nullam risus orci, porttitor ut malesuada vel..</p>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
是否有任何在容器中使用 float 元素的合适解决方案？并将容器显示为整体背景？
最佳答案
嗯，有两个经典的解决方案:
- 设置“溢出:隐藏；”到#container。它会清除 float 但有缺点——如果你有带有“position: absolute;”的元素。必须部分放置在其外部的容器内部，它们将被溢出切割。
- 在 #container 上使用 clearfix hack:http://www.webtoolkit.info/css-clearfix.html它会为你修复它并且没有这个缺点但是更复杂。
不确定它是否比“display: table;”更好或不，通过。
关于html - 具有 float 元素的 CSS 中心站点并显示完整的容器背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7900945/