html知识点
伪类、伪元素
input、img、iframe不支持伪元素，因为伪类是要插入到容器内部一起渲染的，而这几个标签是不能包含其他元素的。
行内元素margin和padding无效问题
margin和padding对行内元素都是左右有效、上下无效，如果需要设置上下，需要把它改为非行内元素，例如inline-block
浮动
浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
首先元素浮动后，产生的特性
1、块元素在一排显示
2、内联元素支持宽高
3、不设置宽度，内容撑开宽度
4、脱离文档流
5、提升层级半层
凡是float属性值不为none,元素display都被当做block(除去flex),但不是真正的块级元素,而是拥有了block元素的特性。
clear:both本质上是让自己不和浮动元素同在一行
bfc
块格式化上下文（BFC）有下面几个特点：
- BFC是就像一道屏障，隔离出了BFC内部和外部，内部和外部区域的渲染相互之间不影响。BFC有自己的一套内部子元素渲染的规则，不影响外部渲染，也不受外部渲染影响。
- BFC的区域不会和外部浮动盒子的外边距区域发生叠加。也就是说，外部任何浮动元素区域和BFC区域是泾渭分明的，不可能重叠。
- BFC在计算高度的时候，内部浮动元素的高度也要计算在内。也就是说，即使BFC区域内只有一个浮动元素，BFC的高度也不会发生塌缩，高度是大于等于浮动元素的高度的。
- HTML结构中，当构建BFC区域的元素紧接着一个浮动盒子时，即，是该浮动盒子的兄弟节点，BFC区域会首先尝试在浮动盒子的旁边渲染，但若宽度不够，就在浮动元素的下方渲染。[看这里]