前一个元素设置浮动了
紧挨着的元素就浮动在上个元素的下面
被上个元素给覆盖
要不想被覆盖 要清除浮动
clear:left
clear:right
左浮元素不覆盖 右边元素不覆盖
clear:both;
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
#header{
height:200px;
width:200px;
background:blue;
color:white;
float:left;
}
#content{
height:200px;
width:200px;
background:green;
color:white;
float:left;
}
#footer{
height:200px;
width:200px;
background:grey;
float:left;
}
#footer2{
height:200px;
width:200px;
background:yellow;
float:left;
}
#main{
clear:both;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="content">Content</div>
<div id="main"></div>
<div id="footer">Footer</div>
<div id="footer2">Footer</div></body>
</html>
1
html 4 浮动 清除浮动
时间： 2024-10-02 08:25:01