23_css清除浮动的三种方法.html

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>当浮动对父元素有影响(父元素装不下子元素或子元素中的内容只有一部分在父元素容器中)</title>


<style type="text/css">

body,div{

margin:0;

padding:0;

}

#header{

height:50px;

width:500px;

background:red;

margin:0 auto;

}

#content{

margin:0 auto;

width:500px;

height:200px;

background:pink;

position:relative;

}

#one{

width:100px;

height:100px;

background:green;

position:absolute;

top:50px;

left:-50px;

}

#two{

width:200px;

height:200px;

background:blue;

float:right;

}

#footer{

width:500px;

height:50px;

background:yellow;

margin:0 auto;

}

.clear:after{

clear:both;

display:block;

visibility:hidden;

height:0;

line-height:0;

content:"";

}

</style>


</head>


<body>

<div id="header">head</div>

<div id="content" class="clear">

<div id="one">1</div>

<div id="two">2</div>

</div>

<div id="footer">foot</div>


</body>

</html>



你可能感兴趣的:(23_css清除浮动的三种方法.html)