IE8下清除浮动元素的margin-top失效

时间：2015-10-29 10:50:43 阅读：393 评论：0 收藏：0 [点我收藏+]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>浮动</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
body,div{
margin:0;
padding:0;
}
.box1{
background:#900;
width:200px;
height:200px;
margin:20px 0 0 20px;
float:left;
}
.box2{
background:#009;
width:300px;
height:200px;
margin:20px 0 0 20px;
float:left;
}
.box3{
background:#099;
width:520px;
height:200px;
margin:20px 0 0 20px;
clear:left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html> 在ff,IE8,360，谷歌下都不起作用

查找网上的解释是：

1）在CSS2.1中，水平的margin不会被折叠；垂直margin可能在一些盒模型中被折叠；

2）当第一个层浮动，而第二个没浮动层的margin会被压缩。

解决思路是：（1）要浮动一起浮动，要就一起不浮动。

（2）为上面的浮动元素加 margin-bottom值

原文：http://www.cnblogs.com/AliceX-J/p/4919642.html

踩

(0)

评论一句话评论（0）

分享档案

更多>