关于BFC

BFC 块格式化上下文

创建BFC的情况（指路）

BFC是盒子元素布局的区域以及浮动元素与其他元素交互的区域，是一个作用范围；规定区域内的元素的排列方式

BFC形成条件

BFC特性

• 内部的Box会在垂直方向，一个接一个地放置

• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

• 每个元素的margin-box的左边， 与包含块border-box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

• BFC的区域不会与float box重叠。

BFC能做什么

• 高度塌陷

HTML: 

  


CSS:
.container {
  width: 500px;
  background-color: #6735;
  border:2px solid red;
}
.left {
  width: 100px;
  height: 200px;
  background-color: #343433;
  float:left;
}

高度塌陷

原因：标准文档流中，container元素的高度由子元素left撑开，left元素设置float之后脱离了文档流，导致container元素高度塌陷

解决方法：BFC具有包含浮动元素的特性，因此父元素设置overflow:hidden 创建BFC即可包含浮动子元素

• margin重叠

1. 垂直方向上的块元素margin重叠
   常见场景就不多说了嘻嘻

2. 父子元素的margin重叠

  

    
xixix
  
.wrap {
  width: 200px;
  background-color: #dedede;
  overflow:hidden
}
.wrap h4 {
 
  background-color: #fefe;
  margin-left: 20px;
  margin-top:30px;
}

父子元素margin重叠

原因：属于同一个BFC的两个相邻Box的margin会发生重叠

解决方法：wrap元素添加overflow：hidden

其他方法： wrap元素添加border | padding

• 阻止浮动元素覆盖

 
 BFC的区域不会与float box重叠。BFC的区域不会与float box重叠。BFC的区域不会与float box重叠。BFC的区域不会与float box重叠。BFC的区域不会与float box重叠。BFC的区域不会与float box重叠。BFC的区域不会与float box重叠


.box1{
  height: 100px;
  width: 100px;
  float: left;
  background: #dedede;
}
.box2{
  width: 200px;
  height: 200px;
  background: #dede;
}

字体环绕

原因：box1浮动之后脱离文档流，与box2重叠且引起文字环绕效果

解决方法：box2增加overflow:hidden创建BFC，防止与float元素重叠