iwowen的博客
iwowen
记录和分享技术
  1. 首页
  2. 前端
  3. 正文

关于前端BFC相关笔记

2020年05月09日 146点热度 0人点赞 0条评论

什么是BFC?

W3C对BFC的定义如下: 浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为"visiable"的块级盒子,都会为他们的内容创建新的BFC(Block Fromatting Context, 即块级格式上下文)。

BFC的触发条件

1. 根元素html
2. float不为none
3. overflow不为visible
4. position为fixed或absolute
5. display为inline-block
6. display为flex或inline-flex
7. display为grid或inline-grid
8. display为table相关属性

BFC的渲染规则

  1. BFC垂直方向边距重叠
  2. BFC不会和浮动元素的box重叠
  3. BFC是一个独立的容器,外面的元素不会影响到里面的元素
  4. 计算BFC高度的时候浮动元素也会参与计算
标签: css
最后更新:2020年11月22日

什码

保持饥渴的专注,追求最佳的品质

点赞
< 上一篇
下一篇 >

文章评论

取消回复

最新 热点 随机
最新 热点 随机
使用rollup和typescript搭建自己的函数库 前端关于性能优化方面的记录 关于前端BFC相关笔记 js数据类型和数据转换 dom事件笔记 css盒模型
关于前端BFC相关笔记前端关于性能优化方面的记录前端使用canvas实现贪吃蛇小游戏前端css实现左中右布局如何在react项目中使用redux?使用create-react-app打造多页面应用
前端css实现左中右布局 css盒模型 如何在react项目中使用redux? 在vue中使用mock js函数节流和防抖 关于前端BFC相关笔记
分类目录
  • react
  • vue
  • 前端
  • 工具
文章归档
  • 2020年12月 (1)
  • 2020年5月 (2)
  • 2020年4月 (3)
  • 2020年3月 (1)
  • 2020年2月 (1)
  • 2020年1月 (2)
  • 2019年12月 (1)
  • 2019年11月 (3)
  • 2019年10月 (1)

COPYRIGHT © 2020 iwowen的博客. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

蜀ICP备19037276号-1