Question

<!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" lang="en-US">
<head>
<style type="text/css">
body {width:100%;overflow-x:hidden;}
*{margin:0; padding:0; border:0;}
.wrap{float:left;width:100%;background-color:#ccc;}
.content{width:1000px;margin:0 auto;background-color:#efefef;}
.left{float:left;width:760px;}
.right{float:left;width:240px;}
</style>
</head>
<body>
<div class="wrap">
    <div class="content">
        <div class="left">
            111<br />
            222<br />
            <!-- there still have some lines -->
        </div>
        <div class="right">         
        </div>
    </div>
</div>
</body>
</html>

DIV高度为零，背景颜色消失。即使我给DIV.content height auto or 100%。为什么背景颜色消失了？

Answer 1

为overflow:auto添加.content以清除浮动

示例：http://jsbin.com/onedi3

有关清算的更多信息，请访问http://www.quirksmode.org/css/clearing.html

Answer 2

将overflow: hidden;添加到.content {}会对此进行排序。这是一个浮动清理的东西。添加溢出或清除元素将使包装器包含内部的内容。

Answer 3

浮动元素从其父级“删除”，按布局方式。因此，您的内容div为空，高度为0.有关原因和修正，请参阅this css-discuss article。

Answer 4

使用XHTML，div必须包含内容，否则不会注册为“那里”。要强制它使用XHTML显示，请在要显示的div中键入 。

如何清除浮子？

4 个答案: