我们在写html页面布局的时候，经常会用到浮动float属性，导致父级对象盒子不能被撑开，那么我们如何清除浮动呢，我们一起看一下！工具/原料more电脑（win 10）Hbuilder方法/步骤 clear:both1/4分步阅读

首先我们使用hbuilder,新建一个html文件，写上内容，如下图：

2/4

给两个子标签，设置宽高，背景色，发现一行显示一个，如下图：

3/4

设置浮动，让两个div并排显示，并给父级加背景色，如下图：

4/4

没有清除浮动，父级背景色不显示，必须清除浮动，clear:both ,如下图：

方法/步骤2 overflow:hidden1/1

给父级直接加样式overflow:hidden，如下图：

方法/步骤3 伪类:after 和 zoom1/1

使用伪类，给父级加样式，

.clearfix:after{

display:block;

clear:both;

content:;

visibility:hidden;

height:0

}

.clearfix{

zoom:1

}

浏览器兼容性好，不容易出现怪问题

如下图：

注意事项

个人推荐最后一种清除浮动的方法！

你还有别的清除浮动的方法吗，欢迎留言！

CSS清除浮动