定義了浮動元素後margin-bottom失效的解決辦法

時間 2019-12-12

原文原文鏈接

雖然IE6慢慢的退出市場了，可是仍是有必要了解一些兼容問題，讓本身的知識有一個更好的沉澱。margin-bottom的bug是容器div的 'zoom:1' 觸發了 hasLayout，其內部浮動子元素也參與到了容器的高度計算之中。html

在 IE6 IE7 IE8(Q)中，容器div的 'zoom:1' 觸發了 hasLayout，其內部浮動子元素也參與到了容器的高度計算之中。可是浮動子元素設置的 'margin-bottom' 消失；瀏覽器

在其餘瀏覽器中，容器的 'overflow:hidden' 建立了新的 Block Formatting Context ，一樣，其內部浮動子元素也參與到了容器的高度計算之中。浮動子元素的四個方向的 margin 均正常。spa

例子：第一個div子元素設置了底部的margin值，在清除浮動以後無效code

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