How do I clear my floats?_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-09 19:14 出处：网络

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">

相关专题：css

<!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:1000开发者_运维知识库px;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>

The DIV height is zero, the background color has disappeared. Even if I give DIV.content height auto or 100%. Why is the background color gone?

add overflow:auto for .content to clear the floats

example: http://jsbin.com/onedi3

More information for clearing you can find at http://www.quirksmode.org/css/clearing.html

Adding overflow: hidden; to your .content {} will sort this out. It's a float clearing thing. Adding overflow or a clearing element will make the wrapper contain what's inside.

Floating elements are "removed" from their parent, layout-wise. So your content div is empty and gets a height of 0. See this css-discuss article for the causes and fixes.

With XHTML the div has to have content or it will not be registered as "there." To force it to display using XHTML, type   in the div you wish to display.