css系列之清浮动

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>