BFC的触发条件

根元素(html)float属性不为none

                    position为absolute或fixed

                    display为inline-block, table-cell, table-caption, flex, inline-flex

                    overflow不为visible

清除浮动的方法有哪些

 1、 overflow:hidden;(触发一个BFC)

        缺点：只要里面的内容超出父元素就会隐藏

 2、 在浮动元素下方添加一个空元素div，并设置属性

        div{clear:both; height:0; overflow:hidden;}

        缺点：会添加很多空标记，增加结构负担，产生代码冗余

 3、 万能清除法

       :after{content:“";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

        缺点：单词多

        给父元素加display:table;让父元素转换元素类型和表格一样

        缺点：改变当前元素类型

设置一个元素con(未知大小)在box里面水平垂直居中的方法

第一种：定位

        .box{position:relative;}

         .con{ position:absolute;top:0;left:0:bottom:0;right:0;margin:auto;}

第二种：

.box{display:flex;justify-content:center;align-items:center;}

第三种：

        .div{position:relative;}

        .con{position:absolute;left:50%;top:50%;translateX(-50%)translateY(-50%)}

常见的浏览器内核

Trident代表作：IE

Gecko 代表作：Mozilla

WebKit 代表作：苹果 & 谷歌旧版本

Blink 代表作：谷歌 & 欧鹏