外边距塌陷
外边距塌陷是小白在写CSS最常遇见的问题,我们可以看下面的这个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body > div:first-child{
border: 1px solid black;
}
body > div > div{
height: 200px;
width: 200px;
float: left;
}
body > div > div:first-child{
background: #000;
}
body > div > div:nth-child(2){
background: red;
}
body > div > div:nth-child(3){
background: yellow;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
从上面可以看到由于给子元素添加了浮动的属性,从而导致丢失正常的文档流,父元素无法识别到子元素的高度,导致高度塌陷。对于这个问题有多种解决方法,在这里我主要介绍两种方法:
1.给父元素添加overflow:hidden属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<met