块格式化上下文(Block formatting contexts)

王英
• 阅读 1928

浮动,绝对定位元素,非块盒的块容器(例如,inline-blockstable-cellstable-captions)和overflow不为visible的块盒(当该值已被传播到视口时除外(except when that value has been propagated to the viewport))会为它们的内容建立一个新的块格式化上下文

BFC布局规则:

  • BFC内部盒会在垂直方向,一个接一个的放置

  • 盒的垂直方向的距离由margin决定.属于同一个BFC的两个相邻盒子的margin会发生重叠

  • 每个元素的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反).即使存在浮动也如此

  • BFC的区域不会与float box重叠(利用这个特性可以做自适应窗口大小)

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

  • 计算BFC高度时,浮动元素也参与计算(清除浮动的原理)

块格式化上下文由以下之一创建:

  • 根元素或其它包含它的元素

  • 浮动(元素的float不是none)

  • 绝对定位的元素(元素具有positionabsolutefixed)

  • 行内块 inline-blocks(元素具有display:inline-block)

  • 表格单元格(元素具有display:table-cell,表格单元格默认属性)

  • 表格标题(元素具有display:table-caption,表格标题默认属性)

  • 块元素 元素具有overflow值不是visible

  • 弹性盒子flex boxes(元素具有display:flexinline-flex)

  • display:flow-root

一个块格式化上下文包括创建它的元素内部所有内容,除了会创建新的块格式化上下文的元素

BFC与margin

BFC可以解决margin折叠问题,需要注意的是,overflow:hidden等属性只在父子元素下起作用,相邻兄弟元素无效

BFC与float

BFC可以改变float的覆盖兄弟元素的问题,实现一侧定宽的布局,还可以解决父元素塌陷问题

细说CSS中的BFC
学习格式化上下文

点赞
收藏
评论区
推荐文章
good123 good123
3年前
浅谈BFC格局~
1.BFC含义💳BFC全称:BlockFormattingContexts块级元素格式化上下文W3CCSS2.1规范中的一个概念,它是一个独立容器,决定了块级元素如何对它的内容进行布局,以及与其他元素的关系和相互关系一个页面是由很多个Box组成的,元素的类型和display属性,决定了这个Box的类型,不同类型的Box,会参与不
Easter79 Easter79
3年前
sql:mysql:函数:TIMESTAMPDIFF函数实现TimeStamp字段相减,求得时间差
<divclass"htmledit\_views"id"content\_views"<p&nbsp;函数内指定是minute,则最终结果value值的单位是分钟,如果函数内指定为hours,则最终结果value值单位为小时。</p<preclass"has"name"code"<codeclass"hljssql"<
虾米大王 虾米大王
2年前
java代码092
code092.jsp通过FindServlet类查询分页数据所有图书信息ID图书名称价格数量作者<%Listlist1(List)request.getAttribute("list");for(code089book:list1)%
虾米大王 虾米大王
2年前
java代码099
code099.jspInserttitlehere$pageScope.user.name
Stella981 Stella981
3年前
Confluence代码块(Code Block)宏
有时候现在wiki上插入代码,如何让代码高亮,变的有颜色,下面这篇文章可能会帮助你,先看下django代码高亮效果图!(https://oscimg.oschina.net/oscnet/70a554a8afdbc15c21538eac0ca83a367c1.png)代码块(CodeBlock)宏允许你在 Confluence页面中显示代码,
Easter79 Easter79
3年前
SpringCloud consul 微服务(注册到主机名的问题)
目前项目在使用consul做服务注册与发现,做SpringSecurityOAuth2权限认证的authorization\_code模式的时候发现一个异常坑爹的问题这是开始的服务注册代码块bootstrap.yml:spring:cloud:consul:port:8500
Wesley13 Wesley13
3年前
CSS块级元素与行内元素
CSS块级元素与行内元素行内元素与块状元素1、块级元素:可以设置width,height属性。行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化。可以通过lineheight设置行高(行高和height是不同的东西)。2、块级元素:可以设置margin和padd
Wesley13 Wesley13
3年前
CSS定位规则之BFC
技术改变世界!学习改变人生!1. BFC(block formatting context,中文常译为块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候,BFC提供了一个环境,在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素
Wesley13 Wesley13
3年前
Oracle:Pivot 转多列并包含多个名称
SELECTFROM(SELECTl.DISTRIBUTOR_ID,d.SKU_CODE,d.WH_CODE,d.ORDER_PACKAGES,d.PRICE,d.YEARLY||d.MONTHLYasYM,d
Stella981 Stella981
3年前
JSONArray数据转换成java List
<divid"cnblogs\_post\_body"class"blogpostbody"<p<spanstyle"fontsize:18pt"1.后台接收json数组转成封装实体类的List:</span</p<divclass"cnblogs\_code"<divclass"cnblogs\_code\_tool
Wesley13 Wesley13
3年前
CSS中清除浮动的作用以及如何清除浮动
1.什么是浮动,浮动的作用“浮动”从字面上来理解就是“悬浮移动、非固定”的意思。块级元素(div、table、span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观。这就要用到浮动了。被设置浮动的元素会脱离标准流(竖直排列),从而达到水平排列的效果。例如.未设置浮动时图1中的两张图片竖直排列在父级元素(橙色区域)
王英
王英
Lv1
少年易学老难成,一寸光阴不可轻。
文章
4
粉丝
0
获赞
0