BFC 布局概念总结-阿里云开发者社区

开发者社区> 云原生> 正文

BFC 布局概念总结

简介: BFC 块级格式化上下文 布局规则 内部的Box会在垂直方向,一个接一个的放置。 Box垂直距离有margin决定,属于同一个BFC的两个相邻Box的margin垂直方向上回发生重叠。 每个元素的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。

BFC 块级格式化上下文

布局规则

  • 内部的Box会在垂直方向,一个接一个的放置。
  • Box垂直距离有margin决定,属于同一个BFC的两个相邻Box的margin垂直方向上回发生重叠。
  • 每个元素的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float box重叠
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素;外面的也不会影响里面的。
  • 计算BFC的高度时,浮动元素也参与计算;也就是说可以用BFC来清楚浮动

生产BFC的规则

  • 根元素可以生成BFC
  • float属性不为none
  • position属性为absolute或fixed
  • display属性为flex、inline-block、table-cell、inline-flex
  • overflow不为visible

遵循以上规则就可以产生BFC块级格式化区域

BFC应用

  • 清除浮动

    .父元素{  
      overflow: hidden/auto;
      display: flex/inline-flex;
      float属性不为none
      position:absolute/fixed;
    }
    使用以上四种方式将父元素转化为BFC就可以清除浮动
  • 自适应两栏三栏布局

    使用以上四种方式将非浮动元素转化为BFC就可以清除浮动
    原理:BFC不与浮动元素重叠
  • 防止垂直margin重叠

     在一个元素外再套一个div,并把这个转化为BFC

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
云原生
使用钉钉扫一扫加入圈子
+ 订阅

云原生时代,是开发者最好的时代

其他文章