高度塌陷的问题
在浮动布局中,父元素是被子元素撑开的
当子元素浮动后,其会脱离文档流,子元素从文档流中脱离
将会无法撑起父元素的高度,导致父元素的高度丢失
父元素高度丢失以后,其下的元素会自动上移,导致页面的布局混乱
所以高度塌陷问题需要处理。
通过给元素设置BFC可以处理高度塌陷问题
BFC(block formatting context)块级格式化环境
-元素开启BFC的特点
1.开启后元素不会被浮动元素覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素
-可以通过以下方法开启BFC
1.设置元素浮动
2.将元素设置为行内块元素disply:inline-block
3.将元素的overflow设置为一个非visible的值
overflow: hidden;
overflow: scroll;(带导航条)
<!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>高度塌陷问题</title>
<style>
.out{
border:10px red solid;
background-color: sandybrown;
overflow: hidden;
}
.inner{
width: 100px;
height: 100px;
background-color: seagreen;
float: left;
}
</style>
</head>
<body>
<div class="out">
<div class="inner"></div>
</div>
<div style="width: 150px;height:150px;background-color: rgb(138, 77, 25)"></div>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-50fFxy7o-1643048895602)(C:\Users\xixi yiyi\AppData\Roaming\Typora\typora-user-images\1643048712767.png)]