inline-block的特性：
1.使块元素在一行显示
2.使内嵌支持宽高
3.换行产生被解析成空格
4.不设置宽度的时候内容撑开
浮动float的特性：
1.使块元素在一行显示
2.使内嵌元素支持宽高
3.不设置宽度的时候内容撑开
4.脱离文档流
元素加了浮动，会脱离文档流，按照指定的一个方向移动直到碰到父级边界或另一个元素就停止
5.层级提升半层
对比定位来说，定位是提升一层的层级，同时也是脱离了文档流的
清除浮动的方法：开启BFC(Block Format Context)
启动BFC的必要条件如下：
float属性不为none //也就是开启float
position为absolute或fixed //开启定位
overflow不为visible //打开overflow
display为inline-block，table-cell，table-caption，felx，inline-flex
清除浮动的方法二：给浮动元素的父元素添加css内容：clear:both
清浮动总结：
1.给父元素加高：拓展性不好，随时都需要改动
2.父级也加浮动：margin自动失效
3.inline-block：本身并不脱离文档流，但margin效果也没有
4.在浮动元素下添加<div class="clear">,然后在css里利用clear:both解决
5.与第四条不同做法相同作用：在div浮动元素内添加:<br clear="all">，但不符合W3C规则，改变了样式，结构分离的规则
6.伪类做法:after:{content:"";display:block;clear:both;}
准确做法：
style:
.clear:after{
content:"";
display:block;
clear:both;
}
.clear{
zoom:1;
}
#son{
float:left;
}
html:
<div id = "father" class="clear">
<div id="son"></div>
</div>
