BFC相关内容

(block formating context)块级格式化上下文
创建特殊区域
1.形成BFC
根元素或其他包含根元素的元素。
浮动元素。
绝对定位元素。
内联块。
表格单元格。
表格标题。
overflow块元素。
样式display:flow-root。
样式column-span:all。
2.相关内容
内部的box将会独占宽度，且在垂直方向上一个接一个排列;box在垂直方向上的间距由margin属性决定，同一个BFC的两个相邻box的margin会出现边距折叠现象;每个box在水平方向上的左边缘与BFC的左边缘相对齐，即使存在浮动也是如此;BFC区域不会与浮动元素重叠，而是会依次排列;BFC区域是一个独立渲染容器，容器内的元素和BFC区域外的元素之间不会有任何干扰;浮动元素的高度也参与BFC高度的计算。
3.相关方式

.right{
    overflow:hidden;
    /*高度塌陷问题*/
}

/*居中元素定宽高*/
/*1.absolute 负margin。绝对定位的百分比是基于父元素的宽高计算出来的，设置top和left后，元素偏移后，再修正元素自身宽高的一半*/
.wp{position:relative;}
.box{
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-50px;
    margin-top:-50px;
}

/*absolute margin auto。将各个方向的距离都设置为0，此时将margin配置为auto。*/
.wp{position:relative;}
.box{
     position:absolute;
     top:0;
     left:0;
     right:0;
     bottom:0;
     margin:auto;
}

/*absolute calc*/
.root{position:relative;}
.textBox{
    position:absolute;
    top:calc(50% - 50px);
    left:calc(50% - 50px);
}

/*居中元素宽高不定*/
/*absolute transform*/
/*CSS3新增属性*/
.wp{position:relative;}
.box{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    }

/*lineheight。box设置为行内元素。*/
.wp{
    line-height:300px;
    text-align:center;
    font-size:0;
}
.box{
    font-size:16px;
    display:inline-block;
    vertical-align:middle;
    line-height:initial;
    text-align:left;/*修正文字*/
}

/*把布局当成表格来处理*/
<table><tbody><tr><td></td></tr></tbody></table>

/*css-table*/
.wp{
  display:table-cell;
  text-align:center;
  vertical-align:middle;
}
.box{display:inline-block;}

/*flex布局*/
.wp{
    display:flex;
    justify-content:center;
    align-items:center;
}

/*grid布局，兼容性不好*/
.wp{display:grid;}
.box{
    align-self:center;
    justify-self:center;
}

3.兼容性
PC端有兼容性要求，宽高固定，推荐使用’absolute 负margin’方式。宽高不固定，推荐’css-table’方式。
无兼容性，推荐使用’flex’。
移动端’flex’。
4.书籍
<前端开发核心知识进阶>作者:候策