css浮动和清除浮动

     Css样式的float浮动属性，用于设置标签对象（如：<div>标签盒子、<span>标签、<a>标签、<em>标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。

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

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

Float常跟属性值left、right、none
Float:none 不使用浮动
Float:left 靠左浮动
Float:right 靠右浮动
float语法： 
float : none | left |right
参数值： 
none : 　对象不浮动
left : 　对象浮在左边
right : 　对象浮在右边

<div class="divcss">
    <div class="divcss_left">布局靠左浮动</div>
    <div class="divcss_right">布局靠右浮动</div>
    <div class="clear"></div><!-- html注释：清除float产生浮动 -->
</div>

.divcss{ width:400px;padding:10px;border:1px solid #F00}
.divcss_left{ float:left;width:150px;border:1px solid #00F;height:50px}
.divcss_right{ float:right;width:150px;border:1px solid #00F;height:50px}
.clear{ clear:both}

浮动产生的副作用：

1、背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。
2、边框不能撑开
如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。

解决浮动的方法：

1、对父级设置适合CSS高度
对父级设置适合高度样式清除浮动

.divcss{ width:400px;border:1px solid #F00;background:#FF0; height:102px}
.divcss_left,.divcss_right{width:180px;height:100px;border:1px solid #00F;background:#FFF}
.divcss_left{ float:left}
.divcss_right{ float:right}

2、clear:both清除浮动
我们新建一个样式选择器CSS命名为“.clear”，并且对应选择器样式为“clear:both”，然后我们在父级“</div>”结束前加此div引入“class="clear"”样式。这样即可清除浮动。

.clear{clear:both}

3、父级div定义 overflow:hidden
对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。

.divcss{ width:400px;border:1px solid #F00;background:#FF0; overflow:hidden}
.divcss_left,.divcss_right{width:180px;height:100px;border:1px solid #00F;background:#FFF}
.divcss_left{ float:left}
.divcss_right{ float:right}

还有许多解决css浮动的方法，之后我会详细补充和完善。