(本文翻译自ADOBE)
Clear:both 与margin-top混合使用时在不同浏览器中显示是不一样的,所以尽量避免这两个属性在同一元素上同时使用。
下面是不同浏览器中的显示情况:
-
.floats {
-
width: 25px;
-
height: 25px;
-
background-color: #CCCCCC;
-
border: 1px solid black;
-
float: left;
-
}
-
-
-
.clear1, .clear2, .clear3, .clear4
-
{
-
clear: both;
-
margin-bottom: 20px;
-
}
-
-
.clear1 {
-
border: 1px solid red;
-
margin-top: -1px;
-
}
-
-
.clear2 {
-
border: 1px solid green;
-
margin-top: 25px;
-
}
-
-
.clear3 {
-
border: 1px solid purple;
-
margin-top: 45px;
-
}
-
-
.clear4 {
-
border: 1px solid orange;
-
margin-top: 24px;
-
}
-
-
.nonclear {
-
margin-top: -1px;
-
border: 1px solid blue;
-
margin-bottom: 20px;
-
}
Firefox 1.0

Firefox 1.5

IE 6.0

IE 7.0

Opera 7 &; 8

Opera 9
