独角兽企业重金招聘Python工程师标准>>>
虽然IE6慢慢的退出市场了，但是还是有必要了解一些兼容问题，让自己的知识有一个更好的沉淀。margin-bottom的bug是容器div的'zoom:1'触发了hasLayout，其内部浮动子元素也参与到了容器的高度计算之中。
在IE6IE7IE8(Q)中，容器div的'zoom:1'触发了hasLayout，其内部浮动子元素也参与到了容器的高度计算之中。但是浮动子元素设置的'margin-bottom'消失；
在其他浏览器中，容器的'overflow:hidden'创建了新的BlockFormattingContext，同样，其内部浮动子元素也参与到了容器的高度计算之中。浮动子元素的四个方向的margin均正常。
例子：第一个div子元素设置了底部的margin值，在清除浮动之后无效
<!doctypehtml><html><head><metacharset="UTF-8"><title>浮动元素的影响</title><style>*{margin:0;padding:0;}.con-float-box{width:600px;border:1pxsolid#f00;}.con-float-boxdiv{float:left;width:198px;height:98px;margin:20px0;border:1pxsolid#00f;}.box-pos{width:600px;height:100px;margin-top:10px;border:1pxsolid#000;background:#ccf;}.clearfix:before,.clearfix:after{content:"\200B";display:block;height:0;overflow:hidden;}.clearfix:after{clear:both;}</style></head><body><divclass='con-float-boxclearfix'><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></div><divclass='box-pos'>为第一个div设置了清除浮动的类clearfix，进行了相应的处理，此时，在谷歌浏览器当中正常，但是在IE6，依旧不正常，第7和第8个块底部的margin没有生效。</div></body></html>
解决方案
为容器显式地设置高度。若容器高度不定，则要避免在触发了hasLayout的容器内的浮动子元素上设置'margin-bottom'特性，可以通过为容器设置'padding-bottom'达到相似的效果。
只要不同时触发父元素hasLayout、子元素左浮动、左浮动子元素拥有非零的margin-bottom值，这三个条件中任意一项，均可解决此问题。
以上就是今天E良师益友网对定义了浮动元素后margin-bottom失效的解决办法详解了。
