css面试题一（BFC）

一、BFC的理解，触发BFC的方式，解决了什么问题

1. 什么是BFC

BFC：块级格式化上下文（Block Formatting Context），是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者是一个独立的容器；可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部

2. 触发BFC的方式

• 浮动元素，float不为none的值 ⇒
  1. left(左浮动)，
  2. right(右浮动)
• 定位元素，position ⇒
  1. absolute(绝对定位)，
  2. fixed(固定定位)
• display为以下其中之一的值时 ⇒
  1. inline-block(行内块)，
  2. table-cell(表格单元格，元素会作为一个表格单元格显示（类似 td 和 th标签）)，
  3. table-caption(表格标题，元素会作为一个表格标题显示（类似 caption标签）)，
  4. flow-root(css新增的属性，专门用于触发BFC，但是兼容性差，父元素加上display:flow-root 便触发)
• overflow不为visible ⇒
  1. hidden(内容会被修剪，多出的内容不可见)，
  2. scroll(内容会被修剪，但是浏览器会显示滚动条以便查看多出的内容)，
  3. auto(自适应，如果内容被修剪，浏览器会显示滚动条以便查看多出的内容)
• 根元素(没有父元素的元素)或者其他包含它的元素

注： 除了兼容性问题，用diaplay: flow-root; 来触发BFC最佳，不会产生任何副作用

3. BFC解决了什么问

1. 垂直外边距重叠问题

1.父子元素margin重叠问题

• 预期：son元素顶部与father元素的顶部有个50px的距离
• 实际：father元素顶部距离bady的50px距离，出现了父子margin重叠的现象
  解决办法：
• 给father元素添加 overflow: hidden/auto; 或 diaplay: flow-root;

2.相邻元素垂直外边距重叠问题

• 预期：两个元素之间会有一个80px的margin
• 实际：两个元素之间才垂直边距只有40px
• 原因：相邻垂直边距margin产生合并，并且以值最大的那个作为边距
  解决方法：
• 给其中一个元素外面包一层父元素，并触发父元素的BFC

2. 浮动元素

1.浮动元素造成父元素高度坍塌问题

• 该例子中，给子元素设置了浮动
• 浮动元素会脱离文档流，如果父元素的高度是由原本的浮动元素撑起的(父元素不设高的情况)，元素一旦浮动，就会造成父元素的高度坍塌，因为浮动元素脱离文档流，不参与计算
  解决方法：
• father元素设置display: flow-root; 触发BFC（也可给父元素设置上述可触发BFC的方式）

2.浮动元素与不浮动元素界限不清，重叠

• 两个元素，pink元素设置了浮动，skyblue元素还在标准流中
• 浮动的元素与标准流中的元素重叠在了一起，界限不清
  解决方法：
• 给标准流中的元素skyblue设置 diaplay: flow-root; 触发BFC

3. BFC解决的问题总结

• 父子元素margin重叠问题
• 相邻元素垂直外边距重叠问题
• 浮动元素造成父元素高度坍塌问题
• 浮动元素与不浮动元素界限不清，重叠