初始代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script> -->
<style>
.box1{
background-color: pink;
width: 300px;
}
.box2{
height: 300px;
width: 300px;
background-color: red;
}
.b1{
background-color: purple;
width: 100px;
height: 100px;
float: left;
}
.b2{
background-color: green;
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="box1">
<div class="b1"></div>
<div class="b2"></div>
<div class="clearfix"></div>
</div>
<div class="box2"></div>
</body>
</html>
未浮动
b1与b2浮动之后,父元素高度为0,塌陷了
一、开启父元素的同方向浮动;那么父元素和子元素一起脱离了文档流,
父元素下面的同级元素依旧会上移,但是父元素也算是有了高度!这个高度和子集元素高度一致!
.box1{
background-color: pink;
width: 300px;
/* 开启BFC的方法 */
float: left;
}
二、设置父级元素为绝对定位或者固定定位,和设置浮动的效果一样。
.box1{
background-color: pink;
width: 300px;
/* 开启BFC的方法 */
position: absolute;
}
三、设置父级元素的display为inline-block,也就是将父级元素变成了行内块级元素
父元素下面的同级元素会在原本文档流中的位置下些许下移
父级元素的高度被子级元素撑开了!
.box1{
background-color: pink;
width: 300px;
/* 开启BFC的方法 */
display: inline-block;
}
四、设置父级元素的overflow非默认属性:
父级元素会被子元素撑开,高度就是子元素的高度;
父元素下面的同级元素不会上移。
.box1{
background-color: pink;
width: 300px;
/* 开启BFC的方法 */
overflow: hidden;
}
五(未开启BFC,但是解决了高度塌陷问题!)、设置父元素的高度,这种方法照成的结果和开启overflow的结果一致;但是本质应该是不相同的
.box1{
background-color: pink;
width: 300px;
height: 200px;
}
六、给塌陷的父级元素的最后添加一个元素,使该元素清除浮动,呈现块级样式。也可解决高度塌陷问题!
.box1{
background-color: pink;
width: 300px;
}
.box1:after{
content:'';
display: table;
clear: both;
}