版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
div的常见三种清除浮动的方式
1.用父容器的高度来解决清除浮动问题
###代码举例
<body>
<div id="wraper">
<div class="box floatleft"></div>
<div class="box floatright"></div>
</div>
</body>
<style>
#wraper{
width: 300px;
height: 300px;
margin: 0 auto;
border: 1px solid black;
}
.box{
height: 100px;
width: 100px;
border: 2px solid red;
}
.floatleft{
float: left;
}
.floatright{
float: right;
}
</style
效果如下图:
2.用多余的标签来解决清除浮动问题
###代码举例
<body>
<div id="wraper">
<div class="box floatleft"></div>
<div class="box floatright"></div>
<!-- 清除浮动:兼容所有浏览器;性能最好 -->
<div class="clearFloat"></div>
</div>
</body>
<style>
#wraper{
width: 300px;
margin: 0 auto;
border: 1px solid black;
}
.box{
height: 100px;
width: 100px;
border: 2px solid red;
}
.floatleft{
float: left;
}
.floatright{
float: right;
}
.clearFloat{
clear: both;
}
</style
效果如下图:
3.用伪类来解决清除浮动问题
###代码举例
<body>
<div id="wraper clearFloat">
<div class="box floatleft"></div>
<div class="box floatright"></div>
</div>
</body>
<style>
#wraper{
width: 300px;
margin: 0 auto;
border: 1px solid black;
}
.box{
height: 100px;
width: 100px;
border: 2px solid red;
}
.floatleft{
float: left;
}
.floatright{
float: right;
}
.clearFloat::after{
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFloat{
zoom: 1;
}
</style
产生的效果与效果图2一样,没有区别
4.总结
这里介绍了我用的比较多的三种方式来清理浮动,可以根据自己的喜好和项目的规定来选择清除浮动的方式。对于这三种方法给出一些建议:
1.第一种方式我用的比较多的地方就是用来给导航条添加浮动,左一块、右一块,只要加一个高度就可以实现,但是要根据自己的需求,如果可以用弹性布局也可以就不用浮动了,还是得看情况。
2.第二种方式兼容性比较好,推荐用,我们的项目还是得通过不同的浏览器去调试,个人推荐,并且代码量也是很少,只是会增加没有用的标签。
3.第三种方式虽然代码比较多,但是它不用添加无用标签,也不用给父容器设置高度,也还算不错,可以根据自身选择。
以上就是这三种方法的简单介绍,希望能帮到各位。