CSS日常随笔:BFC块级格式上下文

2017-12-07 20:20:37来源:CSDN作者:qq_17347575人点击

分享

概念

BFC 即 块级格式上下文.也就是独立的块级渲染区域,只有块级元素才能参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。

原理

  1. 块级元素会在垂直方向上一个接一个的放置.
  2. 垂直方向上两个块级元素之间的距离由margin的值来确定.
  3. 块级元素不与浮动元素重叠.
  4. BFC是一个独立的容器,其中的子元素不会影响到容器外的内容.
  5. 每个元素容器块。即使存在浮动也是如此;

作用

解决相邻元素边距重叠问题

设置BFC的方式

  1. 设置float不为none
  2. 设置overflow不为visible
  3. 设置position为fixed,absolute
  4. 设置display的值为table,inline-block,table-cell,flex,inline-flex

微信扫一扫

第七城市微信公众平台