在做项目遇到一个margin-top无效的现象，就是清除浮动的元素，的margin-top碰不到浮动元素的border（或者说不把浮动元素的border，当border）。
1 <style> 2 .float-box{ 3 width: 100px; 4 height: 100px; 5 border: 2px solid red; 6 margin-bottom: 10px; 7 float: left; 8 } 9 10 .clear-box{ 11 clear: both; 12 width: 100px; 13 height: 100px; 14 border: 2px solid black; 15 margin-top:30px; 16 17 } 18 19 20 </style> 21 22 </head> 23 <body> 24 <div class="float-box">我是浮动的盒子</div> 25 <div class="clear-box">我是清除浮动的盒子</div> 26 27 28 </body>
以下是各大主流浏览器中的表现：
然后发现ie7的表现不一样（它的可以触碰到浮动元素的边界）：
会不会是因为，浮动元素没有高度所引起的呢，但是清除浮动不是，把所有的浮动带来的影响都清楚了么？？？？？？？，而且如果把红色的float去掉，他们的距离是30px的。。。。（说明影响并没有完全去除么）
于是我再把清除浮动的元素加上float：left之后，各大浏览所表现的形式就和ie7一样了，ie7照样不变：
1 <style> 2 .float-box{ 3 width: 100px; 4 height: 100px; 5 border: 2px solid red; 6 margin-bottom: 10px; 7 float: left; 8 } 9 10 .clear-box{ 11 clear: both; 12 width: 100px; 13 height: 100px; 14 border: 2px solid black; 15 margin-top:30px; 16 float: left; 17 } 18 19 20 </style> 21 22 </head> 23 <body> 24 <div class="float-box">我是浮动的盒子</div> 25 <div class="clear-box">我是清除浮动的盒子</div> 26 27 28 </body>
ie7下的表现
其他浏览器中的表现
为什么会出现这样的现象呢。。。会不会是清除了浮动的元素在普通的文档六中，而float元素不在普通流中，所以当普通元素的margin-top去找边界的时候就不理会，float元素的border。一旦元素都
浮动后，就都处于同一等级的元素的，就叫浮动流中吧。
2：那为什么浮动元素的margin-bottom可以找得到清除浮动元素的border呢？？？？？？
那为了解释这两个现象：我们来从line-box的说法来解释：
首先，黑色的盒子，的margin-top是去找的上面的bottom-line,由于浮动元素的高度为0，并没有撑起这个line,所以黑色的盒子的margin-top找的对象遥遥无期。。。
再说，红色盒子，浮动元素的margin-bottom,去找下一条线的top-line，也就是黑色盒子的border-top,由于清除浮动，所以红色盒子不能给黑色盒子带来影响，所以能找到。。。。。。。
好了，我编不下去了，太扯了，说着说着，这逻辑我自己都觉得有点牵强。。。。。