BFC(块格式化上下文)

概念:

BFC:块格式化上下文是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域

BFC的创建条件

  • 根元素:body
  • 元素设置浮动:float除了none以外的值
  • 元素设置绝对定位:position设置为absolute
    或fixed
  • display设置为inline-block、table-cell、table-caption、flex等
  • overflow设置为hidden、auto、scroll

BFC的特点

  • 垂直方向上,自上而下排列,和文档流的排列方式一致
  • 在BFC中上下相邻的的两个容器的margin会重叠
  • 计算BFC的高度时,需要计算浮动元素的高度
  • BFC区域不会与浮动的容器发生重叠
  • BFC是独立的容器,容器内部元素不会影响外部元素
  • 每个元素的margin-left值和容器的border-left相接处

BFC的作用

  • 解决margin的重叠问题:由于BFC是一个独立的区域,内部的元素和外部的元素互不影响,将两个元素变为两个BFC,就解决了margin重叠的问题
  • 解决高度塌陷的问题:对子元素设置浮动后,父元素会发生高度塌陷,即height变为0。只需将父元素变成一个BFC即可,常用的办法是给父元素设置overflow:hidden
  • 创建自适应两栏布局:左边的宽度固定,右边的宽度自适应。左侧设置float:left,右侧设置overflow: hidden。这样右边就触发了BFC,BFC的区域不会与浮动元素发生重叠,所以两侧就不会发生重叠,实现了自适应两栏布局

你可能感兴趣的:(前端)