清浮动原理及方式
浮动清理的必要性
当父盒子不浮动，子盒子浮动，子盒子会脱离父盒子的束缚，也就是造成父盒子塌陷，
子盒子不浮动时
<!DOCTYPE html>
<html>
<head>
<title>sss</title>
<style type="text/css">
.fd{
background-color: red;
width: 300px;
/*height: 300px;*/
}
.cd{
background-color: yellow;
height: 200px;
width: 200px;
/* float: right;*/
}
</style>
</head>
<body>
<div class="fd">
<div class="cd">
子盒子
</div>
</div>
</body>
</html>
如图
子元素浮动后，父元素默认为0，即
.cd{
background-color: yellow;
height: 200px;
width: 200px;
float: right;
}
如图
解决方式有这么几个:
方法1,父盒子定义height，适用于父盒子固定，原理：这样父盒子自己设置高度，就不用子盒子撑开了，适用于父级元素已知的情况
即
.fd{
background-color: red;
width: 300px;
height: 300px;
}
如图
方法2.额外标签法，在子元素后面加空div,并设置样式清理两侧浮动。原理：空div设置两侧清浮动，会另起一行，撑开父盒子，而空div高度为0，遂产生如图效果。缺点是增加多余标签。
html部分
<div class="fd">
<div class="cd">
小明学长
</div>
<div class="dd"></div>
</div>
css部分
.dd{
clear: both;
}
方法3.给父级添加样式,
<div class="fd clearfix">
<div class="cd">
小明学长
</div>
</div>
.clearfix:after {
content: "."; //在父盒子内部，子盒子后面添加一个盒，也可以为""，也就是为空
display: block; //设置为块状，不然不会另一一行
clear: both; //另起一行后，清理两侧浮动，撑起父盒子。这三行就够了，后面的内容使其更完善
visibility: hidden;
height: 0;
font-size:0;
}
.clearfix{
zoom:1
}//在IE6, 7下zoom: 1会触发hasLayout，从而使元素闭合内部的浮动
原理和2类似，只是不需要添加div标签，利用：after在子元素后面添加一个空块盒。
方法4.父盒子添加样式
.clearfix{
zoom:1;//兼容低版本ie
overflow: hidden;//是为了给予高度，并不是真正的防止溢出。
}
另外父元素浮动或者position设为absolute也可以，但是下方正常流会上浮，方法是在父级下方加空div,清理两侧浮动
