前一个元素设置浮动了
紧挨着的元素就浮动在上个元素的下面
被上个元素给覆盖
要不想被覆盖 要清除浮动
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