1 BFC

1.1 BFC是什么

  • 常见定位方案

    1. 普通流：元素按照其在HTML中的先后位置至上而下布局，行内元素由左至右排列，占满一行后换行，块级元素占满整行。所有元素默认都是普通流定位
    2. 浮动：元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移
    3. 绝对定位：元素会整体脱离普通流，绝对定位元素不会对其兄弟元素产生影响
    • BFC是属于普通流的

  • Block Formatting Context块级元素格式化上下文，通俗地讲就是“被隔离的区间”，BFC元素的子元素不会对外面的其他元素产生影响

1.2 BFC怎么触发

  • body：默认就是BFC
  • 浮动元素：float：right｜left，即非none
  • 绝对定位元素：position：absolute｜fixed，即非relative
  • overflow：hidden｜scroll｜auto，即非visible
  • display：inline-block｜table-cell｜table-caption｜flex｜grid，即非block和inline
  • contain：layout｜content｜paint

1.3 BFC解决的是什么问题

  • 外边距重叠（兄弟，间距）
    • 定义两个div，分别指定两个盒子的margin-bottom和margin-top属性为10，理论上两者的间距应为20，但实际上间距为10，即出现了margin重合现象，如果两个元素的外边距不同，则取最大值，如果相同则仅为其中一个
    • 可以分别在两个div外包裹一个父元素container，指定container的css属性为以上任意属性值即可触发BFC，使得两个container中的div被分别“隔离”，解决margin重合的问题。
  • margin塌陷（父子，高度）
    • 定义父元素box，子元素box1，当子元素box1指定了margin-top属性为20px后，理论上子元素向下20px，父元素保持不动，但实际上父元素与子元素都向下移动了20px
    • 可以让父元素box变成BFC来解决
    • 出现这个问题的原因是子元素的margin没有参照，可以给父元素添加border-top属性，也可以解决这个问题
  • 高度坍塌，清除浮动（父子，浮动）
    • 定义父元素的宽度与子元素的宽高，当子元素是浮动布局时，理论上虽然父元素没有定义高度，但子元素可以自动将父元素“撑开”。但实际上子元素的浮动属性使其脱离了文档流，导致父元素出现高度坍塌的情况
    • 将父元素变成BFC，使得子元素无法影响到父元素，实现了清除浮动的作用
  • 阻止元素被浮动元素覆盖（兄弟，浮动）
    • 定义两个div，一个是正常元素，另外一个是浮动元素，那么浮动元素就会覆盖到正常元素上面
    • 将正常元素变为BFC元素，这样两个元素就不会互相干扰