html消除浮动方法,css清除浮动的三种方式

以前一直都是用clear:both来清除浮动，但随着css3的普及，这种方式似乎并不是最佳的解决方案，这里总结下这几天学到的清除浮动的方式。

一、clear:both清除浮动

最原始的清除浮动方式，兼容性最好，在浮动的内容的后面加个div定义它的sytle为clear:both。具体代码如下：/*

**css代码

*/

.content{

background:#000;

}

.clear{

clear:both

}

.box{

float:left;

}

box

box

box

二、父级元素定义overflow:auto

这种方式利用父级元素的ouverflow属性来实现清除浮动，设置overflow:auto;后超出父级元素的内容会自动被包括进来，结果可想而知。代码如下

/*

**css

*/

.content{

overflow:auto;

background:#000;

}

box

box

box

三、利用伪类:after(推荐)

这种方式为父级元素添加一个伪类:after,如果不了解伪类的可以自行百度。并在伪类中定义clear:both。代码如下：/*

**css

*/

.content{

background:#000;

}

.content:after{

clear:both;

}

box

box

box

最后修改于

2021-04-28