BFC解决css布局

定义

block formatting context，块级格式化上下文，相对应的还有IFC（inline formatting context）,内联格式化上下文。

原则：如果一个元素具有BFC，那么其子元素，不会影响外部元素，计算高度，会加上浮动元素的高度。

创建BFC

• float值不为none
• position值不为 relative 和 static
• overflow值不为visible
• display值为 table-cell、table-caption 和 inline-block 中的任何一个

块状元素流体特性 自适应布局

块状元素会水平自动铺满外部容器

    
1
    
2

//css

.left {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}
.right {
  background: green;
  height: 100px;
  margin-left: 110px;
}

image.png

可以实现自适应，主要是通过块级元素流体特性。
块级元素和浮动元素如果是兄弟关系，则是覆盖关系
缺点，==不太通用，如果需要设置间距，需要知道外部元素的宽度等，以及这只的间距也不一定相同；==

元素BFC特性实现自适应布局

    
1
    
2


//css
.bfc {
    overflow: hidden;
}
.right {
  background: green;
  height: 100px;
}
.float {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
  margin-right: 10px;
}

bfc后，==元素形成了自己的封闭上下文==，元素原本的流体特性保留，==自动退避浮动元素宽度的距离==，分别形成自己的结界。

bfc自适应情况以及兼容

1.float:left浮动元素本身BFC化，浮动元素失去了本身的流体自适应性，无法实现自动填满容器的自适应布局

2.position:absulute 脱离文档流

3.overflow:hidden 块状元素的流体自适应性保存很好，附上BFC独立区域特性，只是会溢出裁剪，确定不会被裁剪的情况下，可以通过这个进行自适应布局

4.display:inline-block只适用于低级IE浏览器

5.display:table-cell 内容按照表格宽度来，不会超过表格宽度，需要设置一个很大的宽度，不去影响右侧的布局，从而达到多栏自适应效果，这个是用BFC实现自适应布局很好的实践，此处兼容IE8+
display: table-cell; width: 9999px;

多栏目平分自适应布局

    
    
学习BFC，BFC很强大哦，好好学前端，前端很强大，加油，大兄弟！！
    
学习BFC，BFC很强大哦，好好学前端，前端很强大，加油，大兄弟！！学习BFC，BFC很强大哦，好好学前端，前端很强大，加油，大兄弟！！



.float-left {
      float: left;
}
.bfc-content {
  display: table-cell; 
  width: 9999px;
}

image.png

display:table-cell与大小不固定元素的垂直居中

    


.table {
  display: table-cell;
  width: 500px;
  height: 500px;
  border: 1px solid #ccc;
  text-align: center;
  vertical-align: middle;
}

image.png

参考文章

张鑫旭BFC

table-cell