CSS清除浮动的几种方式
原创
1.在知道孩子的高度时，给父亲加上高度，就会清除浮动
HTML
<div class="father">
<div class="son-left">
</div>
<div class="son-right">
</div>
</div>CSS
.father{
width: 500px;
border: 1px solid red;
background-color: orange;
height: 300px;
}
.son-left .son-right{
width: 200px;
height: 300px;
background: blueviolet;
float: left;
}
.son-left{
float:left
}
.son-right{
float: right;
}2.定义一个空的div在父亲下，css 中定义 clear: both;
HTML
<div class="father">
<div class="son-left">
</div>
<div class="son-right">
</div>
<div class="clean">
</div>
</div>CSS
.father{
width: 500px;
border: 1px solid red;
background-color: orange;
}
.son-left .son-right{
width: 200px;
height: 300px;
background: blueviolet;
float: left;
}
.son-left{
float:left
}
.son-right{
float: right;
}
.clean{
clear: both;
}
</style>3. 在父亲身上定义overflow:hidden，来清除浮动
HTML
<div class="father">
<div class="son-left">
</div>
<div class="son-right">
</div>
<div class="clean">
</div>
</div>CSS
.father{
width: 500px;
border: 1px solid red;
background-color: orange;
overflow: hidden;
}
.son-left .son-right{
width: 200px;
height: 300px;
background: blueviolet;
float: left;
}
.son-left{
float:left
}
.son-right{
float: right;
}为什么加入overflow:hidden即可清除浮动呢？
因为overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动
清除浮动常用：overflow:hidden
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
