文档流相关

文档流

标准文档流，元素默认会从左至右，上至下，块级元素独占一行，行内元素共享一行

position

• static

预留空间，出现在正常文档流，（忽略 top, bottom, left, right 或者 z-index 声明）

• relative

预留空间，相对于之前的位置移动

• absoute

没有预留空间，相对于非static的位置移动，如果没有，就一路到根元素

• fixed

没有预留空间，相对于屏幕视口的位置移动

• sticky（兼容不好）

相对于第一个有滚动的父级块元素的位置移动，就是正常像relative，滚动时像fixed

z-index

层叠顺序，整数越大，越被层叠在上面，父子关系的话，一定是父在上子在下，同节点如果不按顺序来的话，就应该去查看其父元素，俗称“拼爹”

clear Float

如果子元素用了float，如果不清除浮动，父元素无法撑开子元素

• clear: both：在父元素下增加一个新元素
• overflow: auto
• clearfix： 写一个类在父元素，利用伪元素插入两个元素块

.clearfix:after{
  content: '';
  display: block;
  clear: both;

BFC

直译为"块级格式化上下文"，与外部区域毫不相关，是一个容器，用来管理块级元素

创建BFC

• float为left|right
• overflow为 hidden|auto|scroll
• display为 table-cell|table-caption|inline-block|inline-flex|flex
• position为 absolute|fixed
• 根元素

BFC特性

特性1： BFC阻止margin重叠

属于同一个BFC时，margin会重叠，只要他们之间没有阻挡（比如边框、非空内容、padding等）就会发生margin重叠

• 兄弟元素margin重叠，解决方案是，中间加个BFC
• 子元素margin父元素不撑开，解决方案是，父元素BFC

特性2：BFC不会重叠浮动元素

就是把浮动元素和其他元素分开，行成自适应两拦布局

特性3：BFC可以包含浮动

子元素浮动，就脱离了文档流，父元素高度坍塌，解决方案是，把父元素变成一个BFC