float浮动以及清除浮动

float(浮动 left/right/none):

       1.使内嵌元素支持宽高

       2.使块元素在一行显示

       3.不设置宽度的时候,宽度由内容

       4.脱离文档流

浮动原理:

     使元素脱离文档流,然后按照指定的方向去移动，直到碰到父级的边界，或者另外一个浮动元素停止  

     文档流:文档流是文档中可显示对象在排列时所占用的位置。

 

BFC ( Box Formatting Context) 块级格式化上下文

        inline formatting context  行内格式化上下文   

    BFC 作用

           1.清除内容浮动

           2.阻止margin向外传递

    触发BFC的条件:

           1.根节点

           2.float不为none的情况     

           3.display的值为inline-block、table-cell、table-caption

           4.overflow的值不为visible

           5.position的值为absolute或fixed

清浮动的方法：

              1.给同为父元素设置 float

              2.给父元素设置display：inline-block；         

              3.给父元素设置overflow不为visible（默认值） 一般设为auto；

              4给父元素加个样式（加入clear）{ :after{content:"";display:block; clear:both;}  目前最流行的方法；}