美文网首页web前端一起努力
CSS之BFC（Block formatting context

CSS之BFC（Block formatting context

作者: 追逐_chase | 来源:发表于2018-11-22 15:19 被阅读1次
web.jpg

BFC（Block formatting context）

  • BFC是一个独立的渲染区域，之可以块级元素参与其中，主要规定了块级元素如何布局，与（BFC）外部的区域没有什么关系。

触发条件

  • float属性不为none
  • position为absolute或者field
  • display为inline-blok.flex,inline-flex
  • overflow不为visible

特点

  • 在 BFC中，盒子从顶端开始垂直地一个接一个的排列
  • 盒子垂直方向距离有margin决定，属性同一个BFC的2个盒子的margin会发生重叠
  • 在BFC中，每一个盒子的左边缘margin-left会碰到容器的左边缘border-left
  • BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘
  • BFC在计算高度时，自然会检测浮动的盒子的高度

相关文章

  • 快速弄懂 BFC

    参考 BFC 是什么 css 2.1 规范。BFC(Block formatting context)直译为"块级...

  • CSS清除浮动的方法

    BFC CSS中的BFC BFC：block formatting context块级格式化上下文； BFC 与清...

  • BFC

    BFC定义 BFC 全称 Block Formatting Context。BFC(Block formattin...

  • 谈谈你了解的BFC

    BFC 全称 Block Formatting Context每个渲染区域用formatting context表...

  • BFC

    BFC全称Block Formatting Context。每个渲染区域使用formatting context表...

  • 关于CSS里BFC特性的理解和应用

    什么是BFC（Block Formatting Context） Formatting context(格式化上下...

  • 关于BFC

    BFC BFC 全称 Block Formatting Context。每个渲染区域用formatting con...

  • BFC

    BFC BFC 全称 Block Formatting Context。每个渲染区域用formatting con...

  • BFC和边距合并

    BFC BFC 全称 Block Formatting Context每个渲染区域用formatting cont...

  • BFC和IFC

    BFC block formatting context IFC inline formatting contex...

网友评论

    本文标题：CSS之BFC（Block formatting context

    本文链接：https://www.haomeiwen.com/subject/lndlqqtx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    web前端一起努力

    关于我们|服务条款|联系我们|CSS之BFC（Block formatting context|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！