float浮動元素不會有margin外邊距合併效果

antzone發表於2017-04-02

關於外邊距合併這裡就不多介紹了，具體可以參閱margin外邊距合併詳解一章節。

但是浮動元素的垂直外邊距並會有合併現象，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#box{
  width:120px;
}
div{ 
  width:100px; 
  height:100px; 
} 
.top{ 
  background-color:green; 
  margin-bottom:20px; 
  float:left;
} 
.bottom{ 
  background-color:red; 
  margin-top:10px; 
  float:left;
}
.clearFix:after{
  clear:both;
  display:block;
  visibility:hidden;
  height:0;
  line-height:0;
  content:'';
}
.clearFix{zoom:1;} /*解決ie6/7相容問題*/
</style> 
</head> 
<body> 
<div id="box">
  <div class="top"></div> 
  <div class="bottom"></div> 
  <div class="clearFix"></div>
</div>
</body> 
</html>

在上面的程式碼中，top和bottom兩個子元素是浮動的，所以它們不會產生上下外邊距合併現象。

相關文章