前端布局02 高度塌陷问题
高度塌陷的问题在浮动布局中，父元素是被子元素撑开的当子元素浮动后，其会脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱所以高度塌陷问题需要处理。通过给元素设置BFC可以处理高度塌陷问题BFC(block formatting context)块级格式化环境-元素开启BFC的特点1.开启后元素不会被浮动元素覆盖
·
高度塌陷的问题
在浮动布局中，父元素是被子元素撑开的
当子元素浮动后，其会脱离文档流，子元素从文档流中脱离
将会无法撑起父元素的高度，导致父元素的高度丢失
父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱
所以高度塌陷问题需要处理。
通过给元素设置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)]
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)