虽然IE6慢慢的退出市场了，但是还是有必要了解一些兼容问题，让自己的知识有一个更好的沉淀。margin-bottom的bug是容器div的 'zoom:1' 触发了 hasLayout，其内部浮动子元素也参与到了容器的高度计算之中。

在 IE6 IE7 IE8(Q)中，容器div的 'zoom:1' 触发了 hasLayout，其内部浮动子元素也参与到了容器的高度计算之中。但是浮动子元素设置的 'margin-bottom' 消失；

在其他浏览器中，容器的 'overflow:hidden' 创建了新的 Block Formatting Context ，同样，其内部浮动子元素也参与到了容器的高度计算之中。浮动子元素的四个方向的 margin 均正常。

例子：第一个div子元素设置了底部的margin值，在清除浮动之后无效

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>浮动元素的影响</title>

<style>

*{margin: 0;padding: 0;}

.con-float-box{

width: 600px;

border: 1px solid #f00;

}

.con-float-box div{

float: left;

width: 198px;

height: 98px;

margin: 20px 0;

border: 1px solid #00f;

}

.box-pos{

width: 600px;

height: 100px;

margin-top: 10px;

border: 1px solid #000;

background: #ccf;

}

.clearfix:before,.clearfix:after {

content: "\200B";

display: block;

height: 0;

overflow: hidden;

}

.clearfix:after {clear: both;}

</style>

</head>

<body>

<div class='con-float-box clearfix'>

<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>

<div class='box-pos'>为第一个div设置了清除浮动的类clearfix，进行了相应的处理，此时，在谷歌浏览器当中正常，但是在IE6，依旧不正常，第7和第8个块底部的margin没有生效。</div>

</body>

</html>

 

解决方案

为容器显式地设置高度。若容器高度不定，则要避免在触发了 hasLayout 的容器内的浮动子元素上设置 'margin-bottom' 特性，可以通过为容器设置 'padding-bottom' 达到相似的效果。

只要不同时触发父元素hasLayout、子元素左浮动、左浮动子元素拥有非零的 margin-bottom 值，这三个条件中任意一项，均可解决此问题。

以上就是今天E良师益友网对定义了浮动元素后margin-bottom失效的解决办法详解了，如果还有不明白的同学，不妨去看看本站提供的HTML视频教程哦！