前一个元素设置浮动了
紧挨着的元素就浮动在上个元素的下面
被上个元素给覆盖
如果行元素不写width，则占满父元素中所在的那一行
要不想被覆盖 要清除浮动
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>
不利用Clear属性，可以用Width来使得div浮动块换行
最外面的父元素给一个固定宽度，子元素利用分割宽度来把浮动的元素挤下到第二行显示。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> #framework { width:400px; } #framework div{ width:198px; height:200px; background:yellow; border:1px solid blue; float:left; } </style> </head> <body> <div id="framework"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> </body> </html>
1