html不清除浮动不能给背景,CSS清除浮动 清除float浮动

一般浮动是什么情况呢？一般是一个盒子里使用了CSS float浮动属性，导致父级

对象盒子不能被撑开，这样CSS float浮动就产生了。

1、背景不能显示

由于浮动产生，如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景

图片，而父级不能被撑开，所以导致CSS背景不能显示。

2、边框不能撑开

如上图中，如果父级设置了CSS边框属性(css border)，由于子级里使用了float

属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

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

由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。

特别是上下边的padding和margin不能正确显示。

CSS清除浮动 清除float浮动

.boxa {

background: #ddd;

border: 5px solid green;

margin:0 auto;

width:400px;

/*height: 80px;*/ /*方法一：对父级设置适合CSS高度*/

/*overflow: hidden; */ /*方法二：父级div定义 overflow:hidden*/

}

.boxb {

margin:0 auto;

width:400px;

}

.boxa-l {

float:left;

width:280px;

height:80px;

border:1px solid #F00;

background: black;

}

.boxa-r {

float:right;

width:100px;

height:80px;

border:1px solid #F00;

background: pink;

}

.boxb {

border:1px solid #000;

height:40px;

background: yellow;

}

.clear{

clear:both

}

内容左

内容右

boxb盒子里的内容

清除浮动前：

清除浮动后：