浮动产生原因:
一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSSfloat浮动就产生了。
例如:有三个div,两个div嵌套在一个大的div中,应用浮动。html如下:
<div>
<div class="div2"></div>
<div class="div3"></div>
</div>
css如下:
.div1{border: 1px solid red;}
.div2{width: 100px;height: 30px;border: 1px solid blue;float: left;}
.div3{width: 100px;height: 30px;border: 1px solid blue;float: left;}
好,本来我们想要的效果是下面的两个div将上面的div撑开,但是实际效果却是:
下面的两个div使用了float属性脱离了普通文档流,浮于文档流之上了。
那么我们现在需要的是清除浮动,使外围的div被撑起来
解决办法:
1、在最外围的div设置能够放下两个div的高度
2、一般我们采用的是clear:both的做法,但是这里我们会多加上div的标签,代码变多了。