關於margin重疊現象的解決方案
阿新 • • 發佈：2018-12-30
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
background-color 對於上面的程式碼，就會出現margin重疊現象，box1和box2之間的margin並不是60而是30，box2和box3之間的margin是50。為什麼會出現這種情況呢？這就涉及到BFC的問題，在這我們不談論BFC的問題，可以去自行百度，我們主要講講解決方案。
方案一：
給每個box新增一個div，並新增一個類,並新增overflow:hidden;
.wrap {
overflow: hidden;
}方案二：
給每個box新增一個div，並新增一個類，並新增border: 1px solid transparent;
.wrap {
overflow: hidden;
}方案三：
給每個box新增一個div，並新增一個類，並新增padding: 1px;
.wrap {
overflow: hidden;
}方案四：
給每個box設定float屬性，並新增clear: both;
.box1,.box2,.box3 {
float: left;
clear: both;
}暫時能想到的就這麼多，說的有不對的地方，歡迎各位前來討論。