HTML+CSS基础(解决高度塌陷问题)
作者：互联网
元素脱离文档流导致的高度塌陷问题
1.问题描述：
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style type="text/css">
.box1{
border: 10px red solid;
}
.box2{
background-color: yellow;
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
元素脱离文档流的结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style type="text/css">
.box1{
border: 10px red solid;
}
.box2{
background-color: yellow;
width: 100px;
height: 100px;
/* float: left; */
}
.box3{
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
想要这样的效果.png
设置浮动之后（高度塌陷问题）.png
- 由于父元素的高度塌陷，则父元素的所有元素都会向上移动，这样会导致页面布局混乱，所以在开发中一定要避免出现高度塌陷问题
2.问题解决一：
根据W3C标准，在页面中元素都有一个隐藏的属性叫Block Formatting Context，简称BFC，该属性可以设置打开或者关闭，默认是关闭的。
当开启BFC后，元素将会具有以下特性：
- 元素的垂直外边距不会和子元素重叠
- 开启BFC的元素不会被浮动元素所覆盖
- 开启BFC的元素可以包含浮动元素
如何开启BFC：
-
1)设置元素的浮动(虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且会导致下边的元素上移，不能解决问题)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style type="text/css">
.box1{
border: 10px red solid;
/非父元素设置浮动/
float: left;
}
.box2{
background-color: yellow;
width: 100px;
height: 100px;
float: left;
}
.box3{
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
+ 2)设置元素的绝对定位（和1效果差不多，不推荐）
+ 3)设置元素的inline-block（父元素的宽度又没了，不推荐使用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style type="text/css">
.box1{
border: 10px red solid;
display: inline-block;
}
.box2{
background-color: yellow;
width: 100px;
height: 100px;
float: left;
}
.box3{
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
+ 4)将元素的overflow设置为一个非visible的值（推荐这种方式开启BFC，副作用小，IE6及以下不支持，此时可以使用hasLayout,给父元素设置```zoom:1```,此处不赘述）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style type="text/css">
.box1{
border: 10px red solid;
overflow: hidden;
}
.box2{
background-color: yellow;
width: 100px;
height: 100px;
float: left;
}
.box3{
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
******
> ***3.问题解决二：***
clear属性可以用于清除元素周围的浮动对元素的影响。也就是元素不会因为上方出现了浮动元素而改变位置。
+ 可选值：
- left ：忽略左侧浮动 （清除左侧浮动对当前元素的影响）
- right ：忽略右侧浮动 （清除右侧浮动对当前元素的影响）
- both ：忽略全部浮动 （清除两侧对他影响最大的浮动对）
- none ：不忽略浮动，默认值
/通过空白撑开父元素，清除浮动，基本没有副作用，可以兼容各种浏览器/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style type="text/css">
.box1{
border: 10px red solid;
clear: left;
}
.box2{
background-color: yellow;
width: 100px;
height: 100px;
float: left;
}
.clear{
clear: left;
}
.box3{
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="clear"></div>
</div>
<div class="box3"></div>
</body>
</html>
******
> ***4.问题解决三：***通过after伪类，和添加div效果一样，而且不会再页面中添加div，最推荐的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style type="text/css">
.box1{
border: 10px red solid;
clear: left;
}
/* 通过after伪类来选择box1的后面 */
.clearfix:after{
/* 必须设置一个空的congtent,否则不起作用 */
content: "";
/* 转换成块元素 */
display: block;
clear: both;
}
/*为了兼容IE6*/
.clearfix{zoom:1}
.box2{
background-color: yellow;
width: 100px;
height: 100px;
float: left;
}
.box3{
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
作者：槑如是
链接：https://www.jianshu.com/p/f09f40591d97
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
标签：color,元素,100px,height,塌陷,HTML,background,CSS,left 来源： https://blog.csdn.net/qq_40229790/article/details/121723332