高度问题描述:
父元素没有指定高度,高度为它的由子元素高度
如果子元素浮动,那么父元素高度不再被子元素撑起,出现高度坍塌
高度坍塌:
解决:
在父元素的第一个子元素的位置,加一个空的块元素,并且设置clear:both,来清楚兄弟元素浮动后对他的影响。
这样原来子元素浮动后,也能撑起父元素高度。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.div1{
border: 10px solid red;
}
.div2{
width: 100px;
height: 100px;
background-color: skyblue;
float: left;
}
/* 抽出来一个clearFix类 以便复用,在父元素的最后加入一个内容*/
.clearFix:after{
/* 转为块元素 */
display: block;
/* 文字内容为空字符串 */
content:"";
/* 清楚兄弟元素浮动后对其造成的影响 */
clear:both;
}
</style>
<body>
<div class="div1 clearFix">
<div class="div2"></div>
</div>
</body>
</html>
结果: