本文共 1863 字，大约阅读时间需要 6 分钟。

1.概念： 块级格式化上下文，block formating context

*******BFC是一个容器，用于管理内部的块级元素如何布局，与区域外部不相关

2.如何触发一个盒子的BFC

（1）display: inline-block

（2）float: left/right

（3）position: absolut/fixed

（4）overflow: hidden 

3.BFC布局规则

（1）块级元素独占一行：内部的box在垂直方向上依次排列

（2）触发BFC的元素可以看见浮动。ps：只有块级看不见浮动，出发了BFC的盒子和文本类元素可以看到浮动

（3）同一BFC内部相邻的box会发生margin重叠。 ps： margin重叠三个条件：1）块级元素， 2）属同一BFC， 3） 相邻

（4）***计算BFC高度时，浮动元素也参与计算（暂时还没遇到）

4.应用

（1）阻止垂直margin重叠

1）阻止相邻兄弟元素margin重叠（margin合并问题：垂直方向上的兄弟结构margin取最大值）

  
   ​10000
1
2

解决方法：

1）在p1外面包裹一层容器，并且触发容器的BFC；这样p1和p2就不在同一个BFC中了，不会出现margin合并。 p：也可以两者都加容器，并且触发BFC。只要保证不在同一个BFC内部就可以

2）一般不适用方法1，因为改变了HTML；一般增加margin的像素值，来达到想要的间距；或者单独增加margin-bottom的值

  
   ​10000
1
   
  
    
2
   

2）阻止父子元素margin重叠（margin塌陷问题：父子结构垂直方向上的margin取最大）（也叫margin值穿透）

条件: 父级盒子中  没有文字，没有边框，没有设置padding-top；         父子盒子一起按照两者最大的margin往下掉

表现：父子嵌套元素在垂直方向的margin,父子元素是结合在一起的,他们两个的margin会取其中最大的值

            正常情况下,父级元素应该相对浏览器进行定位,子级相对父级定位.但由于margin的塌陷,父级相对浏览器定位.而子级没有相对父级定位,子级相对父级,就像坍塌了一样.

  
   ​10000
   
  
    
   

解决方法：

1)  为父级盒子设置边框或者内边距； 不建议使用

2）为父级盒子添加BFC（根据需要添加对应的BFC）

  
   ​10000
   
  
    
   

（2）触发BFC的元素能看到浮动，不会与产生浮动的元素重叠

利用BFC能看到浮动流的特点，实现自适应两栏布局

1）float：原始用法：实现报纸排版的文字环绕图片，如下代码蓝色区域所示：文字围绕着浮动元素排列

  
   
   
   
    左浮动元素
   
   
      他大学预科毕业时获得的一份蒙台梭利学校的毕业文凭，以  及接受安娜•弗洛伊德在儿童精神分析方面的训练，是  他所获得的唯一的正规学业（相当于高中学历）。他完全成为  可以成为弗洛伊德所认为的精神分析家不必攻读医科专业的主  张的一名典型的范例。曾任匹滋堡大学医学院及哈佛大学医学  院的教授。
   

2）利用float与BFC实现自适应两栏布局：为box2添加overflow-hidden，触发BFC，消除浮动元素的影响。

左侧宽度固定，右侧自适应。

  
   
   
   
    左浮动元素
   
   
      他大学预科毕业时获得的一份蒙台梭利学校的毕业文凭，以  及接受安娜•弗洛伊德在儿童精神分析方面的训练，是  他所获得的唯一的正规学业（相当于高中学历）。他完全成为  可以成为弗洛伊德所认为的精神分析家不必攻读医科专业的主  张的一名典型的范例。曾任匹滋堡大学医学院及哈佛大学医学  院的教授。
   

（3）利用BFC清除浮动

浮动元素会脱离文档流，使用浮动后需要清除浮动。

1）脱离文档流示例：box2设置inline-block前后，因为块级元素看不到浮动，触发BFC的盒子和文本类元素（inline-block）可以看到浮动

2）触发BFC清除浮动：

父级盒子触发BFC（这里使用的是overflow-hidden）前后:代码如下

wrapper内部的两个div产生了浮动，脱离了文档流，所以不能包裹到两个子元素。不能撑起没有设置宽高的父级

ps:这里使用伪元素清除浮动效果不好？

转载地址：http://xzxzi.baihongyu.com/