清除浮动
-
根源:
常规流盒子的自动高度在计算时不会考虑浮动盒子,父元素未定高度,内部元素浮动或定位(除相对定位),导致其脱离文档流,使父元素无法适应其高度,从而造成高度坍塌。
-
解决方式:
方法一
给父元素添加高度,并确保子元素高度和小于它。
<!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>
</head>
<style>
.parent{
height: 300px;
background-color: blueviolet;
}
.kid{
height: 300px;
float: left;
width: 300px;
background-color: cadetblue;
border: 1px solid black;
box-sizing: border-box;
}
</style>
<body>
<div class="parent">
<div class="kid"></div>
<div class="kid"></div>
</div>
</body>
</html>
方法二
在盒子结尾加上clear属性,清除浮动。
引入——css属性:clear
- 默认值:none
- left:清除左浮动,该元素必须出现在前面所有左浮动盒子的下方
- right:清除右浮动,该元素必须出现在前面所有右浮动盒子的下方
- both:清除左右浮动,该元素必须出现在前面所有浮动盒子的下方
<!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>
</head>
<style>
.parent{
background-color: blueviolet;
}
.kid{
height: 300px;
float: left;
width: 300px;
background-color: cadetblue;
border: 1px solid black;
box-sizing: border-box;
}
.clear{
clear: both;
}
</style>
<body>
<div class="parent">
<div class="kid"></div>
<div class="kid"></div>
<div class="clear"></div>
</div>
</body>
</html>
方法三
使用after伪元素选择器,并给父元素加上clearfix的类名。
CSS样式:.clearfix::after{
content:""
display:block;
clear:both;
}
父元素引用:class="clearfix"
<!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>
</head>
<style>
.clearfix::after{
content:"";
display:block;
clear:both;
}
.parent{
background-color: blueviolet;
}
.kid{
height: 300px;
float: left;
width: 300px;
background-color: cadetblue;
border: 1px solid black;
box-sizing: border-box;
}
</style>
<body>
<div class="parent clearfix">
<div class="kid"></div>
<div class="kid"></div>
</div>
</body>
</html>
方法四
给父元素添加overflow样式来触发BFC,从而解决高度坍塌。
引入——BFC-块级格式化上下文:决定了元素如何对其上下文内容进行定位。
触发BFC后元素特征:
1.父元素的外边距不会和子元素重叠;
2.开启BFC的元素不会被浮动元素所覆盖;
3.子元素垂直方向不会再margin重叠。理解:这里只是利用该属性撑起父元素的高度,并没将元素清除,当overflow值不为visible时,从而触发BFC,清除浮动。
<!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>
</head>
<style>
.parent{
background-color: blueviolet;
overflow: hidden;
}
.kid{
height: 300px;
float: left;
width: 300px;
background-color: cadetblue;
border: 1px solid black;
box-sizing: border-box;
}
</style>
<body>
<div class="parent">
<div class="kid"></div>
<div class="kid"></div>
</div>
</body>
</html>
欢迎补充!