在主流浏览器中使用clear方法可以轻松完成浮动元素的换行。
例如:
<!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=utf-8" /> <title>ie clear</title> <style type="text/css"> .one{ width:100px; height:100px; border:solid 1px #000; float:left; } .clear{ clear:left; }</style> </head><body> <div class="one"></div> <div class="one"></div> <div class="clear one"></div> </body> </html>
这段代码显示结果如下
但此方法在ie6和ie7下会不起作用,也就是元素不能完成换行。
在这种情况下可以用以下方式替代。
<!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=utf-8" /> <title>ie clear</title> <style type="text/css"> .one{ width:100px; height:100px; border:solid 1px #000; float:left; } /*.clear{ clear:left; }*/ .clear_ie{ height:1px; margin-top:-1px; border:0px; float:left; width:100%; } </style> </head><body> <div class="one"></div> <div class="one"></div> <div class="clear_ie"></div> <div class="clear one"></div> </body> </html>
换行成功~