场景:父盒子没有高度,里面的子盒子都浮动,那么会导致父盒子后面的盒子不会老老实实的摆在父盒子下面,而是会忽略父盒子从而直接放在父盒子的位置上
问题原因:浮动float,会导致子盒子脱离文档流,从而不会影响父盒子的实际高度,因此当前父盒子高度为0。因为父盒子下面的盒子的实际位置受当前父盒子位置的影响,但现在这个父盒子高度为0,即不占位置,那么下面再放盒子就会无视它喽
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 800px;
background-color: skyblue;
}
.left {
width: 400px;
height: 100000px;
float: left;
background-color: green;
}
.right {
width: 300px;
height: 500px;
float: right;
background-color: red;
}
.botton {
width: 900px;
height: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="botton"></div>
</body>
解决方法
1.添加高度法:给父盒子加上一个固定高度,即让它占据一定的位置
局限性:但是我们在实际开发中,有些情况如果我们给盒子设定了固定的高度的话,会使布局受到很大的局限
<style>
.box {
height: 200px;//修改后 添加固定高度
}
<style>
2.额外标签法:在父盒子内容的最后加上一个块级标签,并给它一个属性clear:both
弊端:代码中添加了额外的标签,会导致HTML结构变得复杂
<style>
.clearfix{
clear:both//用于清除两侧的的浮动
}
<style>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="clearfix"></div>//新添加的清浮动元素
</div>
<div class="botton"></div>
</body>
3.单伪元素清除法(原理原方法二一样,只是为了解决添加而外标签的问题):用伪元素替代额外标签
<style>
.clearfix::after{
content: '';//设定伪元素内容为空
display: block;//伪元素属于行内元素 而我们需要的是块级元素
clear: both;//清除必备
//为了兼容性
height:0;//某些浏览器因为兼容性问题,会自动识别出来一个高度
visibility: hidden;//隐藏
}
<style>
<body>
<div class="box clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="botton"></div>
</body>
4.双伪元素清除法:(好处是即可以清浮动,又可以解决高度塌陷问题)(比较常用)
</style>
/*让.clearfix::before 具备display:table 属性
原因:让父级变成table元素(非block块级) 避免高度塌陷问题
高度塌陷问题:当父子标签均为块级,子级设置margin会影响父级的位置*/
.clearfix::after,.clearfix::before{
content: '';
display: table;
}
/*真正用于清楚浮动的操作*/
.clearfix::after{
clear: both;
}
</style>
5.给父元素设置overflow:hidden
</style>
.clearfix{
overflow:hidden
}
</style>