请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

CSS清除浮动的方法

 
将元素的 css 属性 float 的值设置为 left 或 right,把浮动方式改为左浮动或右浮动,使其脱离标准文档流,也会导致父元素高度塌陷,这时就需要清除浮动。
<div class="box">
    <div class="a"></div>
    <div class="b"></div>
</div>
.box {
    background-color: #000;
}
.box .a {
    float: left;
    width: 100px;
    height: 100px;
    background-color: #f00;
}
.box .b {
    float: right;
    width: 100px;
    height: 100px;
    background-color: #0f0;
}
可以通过以下几个方法清除浮动:
1.将父元素 overflow 属性设置为 auto 或 hidden;
.box {
    overflow: hidden;
}
2.添加额外子元素,并设置 clear 属性值为 both;
<div class="box">
    <div class="a"></div>
    <div class="b"></div>
    <div class="clear"></div>
</div>
.clear {
    clear: both;
}
3.给父元素添加::after伪元素,并设置 content、display、clear 属性;
.box::after {
    content: "";
    display: block;
    clear: both;
}
可以新增一个专门清除浮动的类,在需要清除浮动的元素上添加 class 即可:
.clearfix {
    content: "";
    display: block;
    clear: both;
}
<div class="box clearfix">
    <div class="a"></div>
    <div class="b"></div>
</div>

回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。