ie6 ie7下使用clear不能将浮动的元素换行问题
2013-07-06 00:28
344 查看
在主流浏览器中使用clear方法可以轻松完成浮动元素的换行。
例如:
这段代码显示结果如下
![](http://images.cnitblog.com/blog/532482/201307/06002532-a8fa56986d924391a63104e1c1a205c7.png)
但此方法在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; } </style> </head> <body> <div class="one"></div> <div class="one"></div> <div class="clear one"></div> </body> </html>
这段代码显示结果如下
![](http://images.cnitblog.com/blog/532482/201307/06002532-a8fa56986d924391a63104e1c1a205c7.png)
但此方法在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>
换行成功~
相关文章推荐
- 解决IE6,ie7下元素左浮动自动换行的问题
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题
- 解决IE6下div中文字显示竖排,IE7下div不能自适应高度问题
- IE7下浮动(float)层不能实现环绕的问题
- IE7下浮动(float)层不能实现环绕的问题
- IE6/7下同级只有一个元素浮动,会换行问题
- IE6,7下LI浮动不能自动换行,最后一行被隐藏掉解决办法
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题
- 在ie6中浮动元素不能放在非浮动元素的后面,出现换行bug
- IE6 7 下右浮动元素自动换行问题
- IE6、IE7下a标签后面的span元素向右浮动后错位的解决方法
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题
- IE6,IE7下 float:right 后换行的问题
- IE6、IE7下a标签后面的span元素向右浮动后错位的解决方法
- IE7下元素的 'padding-top' 遇到 'clear' 特性在某些情况下复制到 'padding-bottom'
- ie6/7/360安全模式下,浮动的li不能自动换行的问题
- IE7下解决A标签使用padding宽度自适应 padding失效的问题
- 修复IE7浮动元素自动换行的bug
- ie7下使用white-space:nowrap时padding-right失效问题记录
- IE67下浮动元素margin-bottom值失效问题