BFC IFC 总结记录

引用参考:https://segmentfault.com/a/1190000017273573?utm_medium=referral&utm_source=tuicool

http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

BFC

定义

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

BFC布局规则:

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

哪些元素会生成BFC?

  • 根元素
  • float属性不为none
  • position为absolute或fixed
  • display为inline-block, table-cell, table-caption, flex, inline-flex
  • overflow不为visible

总结

BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。

  • 因为BFC内部的元素和外部的元素绝对不会互相影响,因此:
  • 当BFC外部存在浮动时,它不应该影响BFC内部Box的布局,BFC会通过变窄,而不与浮动有重叠
  • 同样的,当BFC内部有浮动时,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

IFC

定义

Inline Formatting Contexts,也就是“内联格式化上下文”。

形成条件:

  • 块级元素中仅包含内联级别元素
  • 形成条件非常简单,需要注意的是当IFC中有块级元素插入时,会产生两个匿名块将父元素分割开来,产生两个IFC

布局规则

  • 子元素水平方向横向排列,并且垂直方向起点为元素顶部。
  • 子元素只会计算横向样式空间,【padding、border、margin】,垂直方向样式空间不会被计算,【padding、border、margin】。
  • 在垂直方向上,子元素会以不同形式来对齐(vertical-align)
  • 能把在一行上的框都完全包含进去的一个矩形区域,被称为该行的行框(line box)。行框的宽度是由包含块(containing box)和与其中的浮动来决定。 IFC中的“line box”一般左右边贴紧其包含块,但float元素会优先排列。
  • IFC中的“line box”高度由 CSS 行高计算规则来确定,同个IFC下的多个line box高度可能会不同。
  • 当 inline-level boxes的总宽度少于包含它们的line box时,其水平渲染规则由 text-align 属性值来决定。
  • 当一个“inline box”超过父元素的宽度时,它会被分割成多个boxes,这些 boxes 分布在多个“line box”中。如果子元素未设置强制换行的情况下,“inline box”将不可被分割,将会溢出父元素。

原文地址:https://www.cnblogs.com/xiaoyuchen/p/10566068.html

时间: 2024-11-14 12:39:54

BFC IFC 总结记录的相关文章

CSS3/BFC/IFC

SCC3边框 1.给边框添加圆角:     <!DOCTYPE html>     <html>     <head>     <style>      div{     text-align:center;[文本为水平方向对其,居中]     border:2px solid #a1a1a1;     padding:10px 40px; [内边距间距为上下和左右]     background:#dddddd;     width:350px;[宽度]

css3中的BFC,IFC,GFC和FFC(转载)

作者原文网址:http://www.cnblogs.com/dingyufenglian/p/4845477.html   What‘s FC? 一定不是KFC,FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用. BFC BFC(Block Formatting Contexts)直译为"块级格式化上下文".Block Formattin

盒子模型、IFC、BFC和Collapsing margins

前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日学习的记录. 何为盒子模型?    盒子模型到底何方神圣居然可以作为CSS的基础?闻名不如见面,上图了喂!  再来张切面图吧!  下面我们以 <div></div> 为栗子.<div></div> 标签被浏览器解析后会生成div元素并添加到document tr

重拾 BFC、IFC、GFC、FFC

温故知新,巩固基础 从 FC 开始 FC,Formatting Context,格式化上下文,是 W3C CSS2.1 规范中的一个概念,定义的是页面中一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,及和其他元素的关系和相互作用. 常见的FC有:BFC(Block Formatting Context | 块级格式化上下文)和IFC(Inline Formatting Context | 行内格式化上下文). 其次还有:GFC(GridLayout Formatting Conte

BFC与垂直外边距合并问题

一.什么情况下发生外边距的合并 1)必须处于普通文档流中(不能脱离文档流),并且处于同一个BFC中 2)相邻的外边距,不能有间隙和边框 3)垂直方向上 二.如何合并 1)兄弟元素之间,外边距合并会去最大的那个外边距而不是取和 2)父子元素之间,外边距合并会将子元素的外边距设置给父元素 3)空元素 三.如何解决垂直外边距重叠问题? 1)父元素添加透明上边框或者内边距 2)父元素前面块元素隔开 3)开启BFC, *设置 display:table/table-cell/table-captions/

2020前端面试汇总

?01 前言 工作了这么久,一直没有自己的一个技术知识沉淀,这一次去找了很多前端面试题,再加上自己的工作经验,进行一次汇总,强烈要求自己掌握以下内容,不仅要知其然,还要知其所以然.让自己以后在面试或者工作中做到"心中有佛,不虚场合". 02 目录 下面是这篇文章的目录结构,一般比较简单的问题我就一笔带过了,主要是分享一下比较有难度的知识点,答案来自网上,如果有版权问题我会删除.还有本文只是给出一个大概的知识点,如果想要深入学习还要靠自己去查一下哦! 如果答案有错误,欢迎指正! 计算机基

布局方式

# 布局方式 # 负边距布局法: ## 1.两栏和三栏 ## 利用margin的负像素,实现把位置给旁边的元素! 如果其中有内容,如果不想其两块元素不发生重叠,便加一个DIV子元素,让其margin的值为负像素的正值! <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></title>   

多网卡环境下Eureka服务注册IP选择问题

一.问题场景 服务器上分别配置了eth0, eth1和eth2三块网卡,只有eth1的地址可供其它机器访问,eth0和eth2的 IP 无效.在这种情况下,服务注册时Eureka Client会自动选择eth0作为服务ip, 导致其它服务无法调用. 二.问题原因 由于官方并没有写明Eureka Client探测本机IP的逻辑,所以只能翻阅源代码.Eureka Client的源码在eureka-client模块下,com.netflix.appinfo包下的InstanceInfo类封装了本机信息

CSS 技术关键字

CSS 技术关键字 元素 替换元素 非替换元素------替换元素和非替换元素的分类是CSS范畴内的,其它的分类都不属于CSS定义的                替换元素和非替换元素的定义是出于“我要不要管你内容区域的样式”考量的. 行内元素 块元素 行内块元素   ---   行内元素.块元素.嵌套规则属于HTML里面定义里的语义范畴.具体而言,行内元素(标签).块元素(标签)的区分只停留在HTML4阶段,HTML5早就已经放弃这种分类方式了.样式和结构/语义的分离体现在,我们说到元素时,指