css浮动产生

浮动产生原因:

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

例如：有三个div，两个div嵌套在一个大的div中，应用浮动。html如下：

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的标签，代码变多了。