你必须懂得的css清除浮动方法,4种清除浮动方法

分类:发布时间:2015-02-03 10:41作者:乐潇游来源:LXYWEB热度:2347 ℃

做前端开发我们都不得不使用float浮动属性,但是如果使用了浮动,难免会遇到父级元素不能自适应高度。

假设了有三个盒子对象,一个父级里包含了两个子级,父级元素没有设置固定高度,子级一个使用了float:left(左浮动)属性,另外一个子级使用float:right(右浮动)属性,这种情况的话父级元素的高度就必定不能被子内容而撑开。

如图:

三个盒子对象

设置了浮动之后,父级元素不能被撑开

我们所希望的效果


这种情况在我们的工作中特别常见,我们可以通过四种方法清除浮动,

方法一:使用一个空标签

看看css属性


方法二:给父元素设置display:inline-block属性

方法三:给父元素设置overflow:auto或hidden属性

方法四:利用css伪类(比较常用,例如bootstrap框架使用的就是这种方法)

将.clearfix这个类加入到需要清除浮动的父级元素

例如<div class="cont clearfix"></div>


好啦以上就是清除浮动的几种方法,不知道童鞋你学会了么?

零基础的同学请【猛戳这里】下载html+css网页制作基础入门教程。