1、为何会有BFC？BFC是谁提出的？
“BFC”是Block Formatting Context的缩写，中文为“块级格式化上下文”，这个概念是由CSS2.1提出来的。
每个元素都是一个盒子，盒子外的父元素应该不会受到盒内子的子元素影响，子元素浮动后，父元素高度变为0，使高度塌陷；
BFC就是来解决这个问题的：如果一个元素具有BFC，内部子元素再怎么折腾，都不会影响外部的元素。
2、什么时候会触发呢？常见的情况如下：
<html>根元素或其他包含根元素的元素
float的值不为none
position的值不为relative、static
overflow的值为auto、scroll或hidden
内联块display:inline-block
表格单元格display:table-cell
表格标题display:table-caption
只要符合上面任一条件，就无须加clear:both属性，不需要每个div都加cf
3、连续英文字符无法换行
.en{
display: table;
width: 100%;
table-layout: fixed;
word-break: break-all;
}
4、多种方式实现居中
<div class="wp">
<div class="box fixed-size">text</div>
</div>
.wp{border:1px solid red;width: 300px;height: 300px;}
.box{background-color: green;}
.box.fixed-size{width: 100px;height: 100px;}
【居中元素定宽高】
A. absolute + 负margin
.wp{
position: relative;
}
.box{
position: absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
}
修正元素自身宽高的一半，即box宽高的一半是50
B. absolute + margin auto
.wp{
position: relative;
}
.box{
position: absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
}
C. absolute + calc
.wp{
position: relative;
}
.box{
position: absolute;
top:calc(50% - 50px);
left:calc(50% - 50px);
}
【居中元素不定宽高】
<div class="wp">
<div class="box">text</div>
</div>
.wp{
border:1px solid red;
width: 300px;
height: 300px;
}
.box{
background-color: green;
}
A. absolute + transform
.wp{
position: relative;
}
.box{
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
B. line-height
.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;
}
C. css-table
.wp{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box{
display: inline-block;
}
D. flex
.wp{
display:flex;
justify-content: center;
align-items: center;
}
E. grid
兼容不好
.wp{
display:grid;
}
.box{
align-self: center;
justify-self: center;
}
总结：
PC端有兼容性要求，宽高固定，推荐使用absolute + 负margin实现居中
PC端有兼容性要求，宽高不固定，推荐使用css-table实现居中
PC端无兼容性要求，推荐使用flex实现居中
移动端推荐使用flex实现居中
网友评论