ie6 ie7下使用clear不能将浮动的元素换行问题
生活随笔
收集整理的這篇文章主要介紹了
ie6 ie7下使用clear不能将浮动的元素换行问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在主流瀏覽器中使用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>換行成功~
轉載于:https://www.cnblogs.com/michealx/p/3174729.html
總結
以上是生活随笔為你收集整理的ie6 ie7下使用clear不能将浮动的元素换行问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HDU 4422 The Little
- 下一篇： 76Byte让你的JQuery更快