rem、em、px之间的区别

px是固定的像素，设定大小后无法自适应窗口大小调整  
rem与em都是相对长度单位
em相对于父元素设置字体大小
rem则是相对于根元素设置字体大小

BFC

全称为块级格式化上下文（Block Formatting Context）
功能：
1 相当于页面中独立的一块区域，里面的浮动元素不会乱跑
2 与浮动元素产生边界
创建的条件：
1 根元素或其它包含它的元素  
2 浮动元素 (元素的 float 不是 none)  
3 绝对定位元素 (元素具有 position 为 absolute 或 fixed)  
4 内联块 (元素具有 display: inline-block)

清除浮动

浮动溢出

在一些浏览器中，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象（说白了就是内容浮动后超出了容器范围）
清除浮动主要是为了解决父元素因为子级元素浮动引起的内部高度塌陷的问题

法一

额外标签法
给谁清除浮动，就在其后额外添加一个空白标签 ，给其设置clear：both
优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化比较差
clear：both：本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来 

css

html

法二

父元素添加overflow:hidden
通过触发BFC方式，实现清除浮动
优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

css

法三

使用after伪元素清除浮动
优点：符合闭合浮动思想，结构语义化正确。
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout

css

法四

使用before和after双伪元素清除浮动
优点：代码更简洁
缺点：用zoom:1触发hasLayout

css

法五

为父元素设置高度
缺点: 需要手动添加高度，如果后面的高度发生变化，还要再次修改高度，给后期的维护带来麻烦
优点: 简单粗暴直接有效，清除了浮动带来的影响