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不能将浮动的元素换行问题相关推荐

一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行
一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行转载于:https://www.cnblogs.com/mabelstyle/p/3844739.html
IE6/IE7下：inline-block解决方案
IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的displ ...
IE6/IE7下：inline-block不兼容的问题
IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素 ...
ie6,ie7下设置overflow:auto下滚动条不起作用
今天遇到一个比较特殊的情况:ie6,ie7下设置overflow:auto下滚动条出来了但是滚动条不起任何作用,但在火狐,ie8,ie9,谷歌等浏览器下正常显示.通过查询终于找到原因,只需要加一个po ...
如何让浮动的元素换行？？css
当你想要做成这种布局效果的时候紫色框里面的内容那样它是一个列表 li元素是块级元素默认大小是父元素ul的宽并且换行如果li没有背景的话那就不用管了可是问题来了它不但有背景而且是根据文字 ...
ie6 ie7下，Li不能自动换行，出现竖排文字现象（PS：li不固定宽度，所有li同一行显示），在ie8却可以...
好久没写CSS,今天又发现一个ie兼容问题. 我需要所有的li在同一行显示,不固定Li的宽度,如果一行排不下,需要自动换行.当然Li的内容长度不同. 必须在li加white-space:nowrap; ...
IE6,IE7下按钮(BUTTON)变宽
给按键添加个样式就OK了,没研究开始的时候就重置它,有空在完善下. .button{overflow: visible; padding: 0 .5em;} 很简单,不是吗. 转载于:https:// ...
使用Blackbird开源JavaScript库時，在IE6+、IE7下無法使用問題說明
在新聞 [url]http://www.iteye.com/news/3832-goodbye-alert-the-use-of-new-information-pop-up-box[/url] 發布 ...
解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后，子元素不随着滚动条滚动的问题...
解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题在IE6,IE7下,子元素使用position:relative ...

ie6 ie7下使用clear不能将浮动的元素换行问题

ie6 ie7下使用clear不能将浮动的元素换行问题相关推荐

最新文章

热门文章