html中清除右侧浮动的运用,前端浮动布局中清除浮动的方式：Clear 属性和伪元素 | IT工程师的生活足迹...

上面已经讲过了需要对浮动布局方式设置清除浮动；下面介绍几种清除浮动的方式。

一、隔离法 Clear

也称为额外标签法。就是在最后一个浮动的子元素后面添加一个额外标签；在这个标签上添加清除浮动样式。

clear : both

1.1、Clear 属性

设置哪个方位没有浮动元素

此属性指定元素是否可以位于其之前的浮动元素旁边，或者必须在其下方向下移动(清除)。

1.2、注意点

1、该属性可以应用于浮动元素和非浮动元素

在 CSS1 和 CSS2 中，这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的。

在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。

不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

left

在左侧不允许浮动元素。

right

在右侧不允许浮动元素。

both

在左右两侧均不允许浮动元素。

none

默认值。允许浮动元素出现在两侧。

inherit

规定应该从父元素继承 clear 属性的值。

二、父元素添加 overflow 属性

可以给父级元素添加 overflow 属性，将其属性设置为 hidden,auto 或 scroll。

优点：代码简洁

缺点：无法显示溢出的部分

三、:after 伪元素法

.clearfix:after{

content:'';

visibility:hidden;

display:block;

width:0;

height:0;

clear:both;

}

.clearfix { /* 兼容 IE6、7 */

*zoom: 1;

}

优点：没有增加标签，结构更简单

缺点：照顾低版本浏览器

四、双伪元素清除浮动

.clearfix:after,

.clearfix:before {

content: '.';

display: table;

}

.clearfix:after {

clear: both;

}

.clearfix {

*zoom: 1;

}

优点：代码更简洁

缺点：照顾低版本浏览器