css 清除浮动
父元素没有设置高度,子元素使用了
float
浮动布局,导致元素脱离了文档流
从而使父元素的高度不能根据子元素的高度自动适应,影响布局混乱
1. 浮动的元素添加 同级 的空标签,并设置 clear:both
<div>
<div class="big_box">
大盒子
<div class="small_box">小盒子浮动</div>
<div class="clear"></div>
</div>
</div>
.clear {
clear: both;
}
.big_box {
padding: 20px;
background: #c80d0d;
.small_box {
float: left;
background: yellow;
width: 300px;
height: 300px;
}
}
2. 给浮动元素的 父元素 添加 overflow 样式
<div>
<div class="big_box">
大盒子
<div class="small_box">小盒子浮动</div>
</div>
</div>
.big_box {
padding: 20px;
background: #c80d0d;
overflow: auto;
.small_box {
float: left;
background: yellow;
width: 300px;
height: 300px;
}
}
3. 给浮动元素的 父元素 添加 after
<div>
<div class="big_box">
大盒子
<div class="small_box">小盒子浮动</div>
</div>
</div>
.big_box {
padding: 20px;
background: #c80d0d;
&::after {
content: '';
display: block;
clear: both;
visibility: hidden;
}
.small_box {
float: left;
background: yellow;
width: 300px;
height: 300px;
}
}