html6清除浮动,CSS3清除浮动6种方法集合

一、浮动产生原因

一般浮动是什么情况呢？一般是一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了。

本来两个黑色对象盒子是在红色盒子内，因为对两个黑色盒子使用了float浮动，所以两个黑色盒子产生了浮动，导致红色盒子不能撑开，这样浮动就产生了。

简单地说，浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动。

二、浮动产生负作用

1、背景不能显示

由于浮动产生，如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

2、边框不能撑开

如上图中，如果父级设置了CSS边框属性(css border)，由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示

由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

.divcss{

width:400px;

border:1px solid red;

background:#FF0;

/*!*height: 150px;*! 方法1：设置父元素的高度*/

/*!*float: left;*! 方法2： 父元素浮动*/

/*overflow: hidden; 方法3:父元素设置overflow: hidden*/

/*!*position: absolute;*! 方法6：父元素绝对定位脱离文档流*/

}

.divcss-left,.divcss-right{

width:180px;

height:100px;

border:1px solid #00F;

background:#FFF}

.divcss-left{

float:left

}

.divcss-right{

float:right

}

/*.clerrfix{*/

/*!*clear: both; *! 方法4：在父元素内部，子元素后面设置清除浮动*/

/*}*/

/*.clearfix:after{*/

/*content: '';*/

/*display: block;*/

/*clear: both;*/

/*}*/

/*.clearfix{*/

/*!*zoom: 1;*! 兼容ie*/

/*!*}*!

方法5：用after*/

/*.clearfix:after{*/

/*content: '';*/

/*display: block;*/

/*clear: both;*/

/*height: 0;*/

/*visibility: hidden;*/

/*}*/

/*新浪*/

left浮动

right浮动