IE6下margin时，float浮动产生双倍边距
今天遇到了一个IE6下的兼容性问题，虽然IE6已经不被大众所期待了，用户也已基本上消失的所剩无几，但是，作为一个问题而存在，我们有必要尝试的去研究一下bug的改善方法
对元素float-left，然后再对元素设置margin-left:40px，调试时候，鬼一般的出现了双倍的margin-left,变为80px（同样如果是float-right,margin-right亦是如此）
效果如下：
而在chrome，IE7+，均没有这个现象产生，现象如下：
后来，在样式中给元素添加了一个display:inline之后，就没有这个现象产生了，由于inline是使元素变成行内元素，那么什么是行内元素呢，其实就是内联元素，只是叫法不同，描述的都是一种状态，那么何为内联元素呢？就是说允许其他与之均为内联的元素都能够在同一行显示，如常见的<a>,<span>,当然，我们对其设置宽度和高度是不起作用的，除非我们再给他加入block；
我们的标签我们这么理解，然后当元素变为行内元素之后，会新开辟一个地方，而那个地方之前是没有元素的或者没有内联元素排在它的前面，那么这样，行内元素自然就会自动的浮动到我们父级元素的边框上，则双倍margin的现象就会消失，取而代之的是单倍margin正常显示，就这么理解。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="stylesheet" type="text/css" href="css/inside.css" />
</head>
<body>
<div class="content clearFix">
<div class="main margin">
</div>
<div class="main margin">
</div>
</div>
</body>
<script type="text/javascript">
</script>
</html>
.main{
margin-left: 40px;
background-color: #a847c3;
width: 80px;
height: 80px;
padding: 20px 20px;
border: 1px solid #2C2C2C;
float: left;
display: inline;
}
.content{
background-color: #2143fd;
margin: 100px auto;
width: 1000px;
height: 120px;
}
.clearFix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden
}
当然还有一个方法，就是我们将div改成<span>标签，这样的好处就在于，<span>标签本身就是具有内联属性的内联元素，那么问题又来了，内联元素对于宽度和高度是没有效果的，但是我们加了float之后元素就会呈现出来了，要是不加就不会出现，为什么呢（由于默认本身为内联，故没有加display:inline）？现象如下:
加了float之后的现象：
后来我上了百度搜索了一下，键入“加了float”，百度奇迹般的自动弹出
看来这是一个大众耳熟能详的问题啊，笔者不禁为自己知识的浅陋而感慨
然后得出的结果如下：
由于对元素float之后，会使得元素自动变为block，因为几个元素之间的浮动，是需要紧挨着元素的边框，如果不是block，就不能实现浮动。然后内联元素会根据样式中设定的宽度和高度来调整自身的大小，如果样式中没有设定宽度和高度，那么就会自适应为其元素默认的宽度和高度。
样式如下：
.main{
margin-left: 40px;
background-color: #a847c3;
width: 80px;
height: 80px;
padding: 20px 20px;
border: 1px solid #2C2C2C;
/*display: block;*/
float: left;
/*display: inline;*/
}
