目录
高度塌陷
什么是高度塌陷?
一般情况下,父元素的高度不会写固定值,而是让它被子元素撑开,随着子元素高度的变化而变化。高度塌陷就是我们给子元素设置浮动,让子元素脱离文档流,不再能撑开父元素的高度,导致父元素的高度丢失,从而影响了整个页面的布局。
那怎么解决高度塌陷呢?
<!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>
.outer {
border: 10px red solid;
}
.inner1 {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.box3 {
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1"></div>
</div>
<div class="box3"></div>
</body>
</html>
高度塌陷如图所示:
第一种解决方案
.o