CSS的BFC以及应用

35次阅读

共计 832 个字符,预计需要花费 3 分钟才能阅读完成。

CSS 的 BFC 是什么

BFC(Block Formatting Context)块级格式化上下文

首先格式化上下文是一套 css 规范定义的页面渲染区域,有自身的渲染规则(定位,子元素之间的关系)
那么 BFC 便是格式化上下文中的其中一种,可将拥有 BFC 特性的元素看成一个大容器,里面的子元素布局
不会影响到外面的元素

元素如何拥有 BFC 特性

  1. 当元素是 html 根元素时便自动拥有 BFC 特性
  2. 当元素被设置成绝对定位的元素(position: fixed , absolute)
  3. 当元素设置成除了 float:none 元素之外的浮动元素
  4. 当元素设置了 overflow 属性,并且值不为 visible

如何应用元素的 BFC 特性

  1. 解决上下外边距重叠的问题
    原因:当我们定义两个块级元素,它们之间的上下边距会重叠
    这是由于根元素拥有 BFC 特性,会将两个块级元素的上下外边距进行重叠
    解决:若想让它们之间的上下边距不重叠,则要对它们分别拥有 BFC 特性

      eg.  <div style="overflow: hidden"></div>
         <div style="overflow: hidden"></div>
      这样两个元素便会独立开来,不会发生上下外边距的重叠了
    
  2. 清除浮动,解决由于浮动带来的父元素高度坍塌的问题
    原因:由于父元素没有设置高度,子元素设置成浮动后,会脱离普通文档流,让父元素高度塌陷
    解决:由于 BFC 容器可以包含浮动元素,所以可以触发父元素的 BFC 属性

     eg. <div style="overflow: hidden">
              <div style="float:left; height:200px"></div>
          </div>
    
  3. 处理元素被浮动元素覆盖
    原因:设置为浮动元素其兄弟元素会被覆盖
    解决:将兄弟元素追加 BFC 特性,可以和浮动元素隔离开来,不被其覆盖

      eg. <div style="overflow: hidden">content</div>
            <div style="float:left; width:200px; height:200px"></div>
    

正文完
 0