CSS中有多少种清除浮动的方法？哪种更常用？

方式一：使用overflow属性来清除浮动

方式二：使用额外标签法

.clear{
　　clear:both;
}

在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.

内部标签：会将这个浮动盒子的父盒子高度重新撑开.

外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子.

注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱.

方法三:使用伪元素来清除浮动(after意思:后来,以后)

.clearfix:after{
　　content:"";//设置内容为空
　　height:0;//高度为0
　　line-height:0;//行高为0
　　display:block;//将文本转为块级元素
　　visibility:hidden;//将元素隐藏
　　clear:both//清除浮动
}
.clearfix{
　　zoom:1;为了兼容IE
}

方法四:使用双伪元素清除浮动

.clearfix:before,.clearfix:after {
　　content: "";
　　display: block;
　　clear: both;
}
.clearfix {
　　zoom: 1;
 }

总结:第一种方法会将超出部分隐藏在某些时候我们想清除浮动并且保留超出部分时做不到,第二种方法会增加许多不必要的标签,

所以我们尽量使用第三种方法来清除浮动,为什么不选择第四种方法呢?因为第四种是第三种的改良版虽然比较简便,但是不严谨!

页面布局的排列规则是什么？怎样清除浮动标签？

有序列表标签的基本属性简介【前端web文章】

nav标签怎么用？nav标签的有什么作用？

nav标签怎么用？nav标签的有什么作用？

黑马程序员web前端与移动开发培训