关于BFC的一些应用

Java_oldboy 发布于2019-08-28 18:25 / 2404人阅读

摘要：关于的概念性介绍就不赘述了，网上有很多关于此的介绍，后面也罗列了些个人认为很不错的文摘。那今天要说的是关于它的一些技巧性应用，通过示范比较常会接触到的排版布局方面的需求来说明下。对于结构有一点要求，触发的元素必须位于最后一位。

关于Block Formatting Context(BFC)的概念性介绍就不赘述了，网上有很多关于此的介绍，后面也罗列了些个人认为很不错的文摘。

那今天要说的是关于它的一些技巧性应用，通过示范比较常会接触到的排版布局方面的需求来说明下。

BFC实例 左中右布局的自动扩容

这是一个比较常见的布局需求，如下，这是一个表单里面的其中一行，想下怎么排呢？

好了，这时候需求有变动了，还需要增加些东西，就变成了这样：

唔，这会看到后面发现，还有这样子的：

虽然，有其他办法来实现这样的效果，那是否有更轻巧的实现方式呢？那就是BFC啦，通过BFC可以实现自动扩容的效果，就是你怎么加都行（点这里看线上例子）。

复杂背景下的目录线实现

这个，看着是不是特别的熟悉：

这种类word的目录结构，脑海里已经将它切好了。按照通常的做法是，背景纯色背景，那标题文字直接应用同色背景即可，简单快捷方便。

不过，看到下面的是不是要悲剧了，点这里可以看线上的：

这种就不单单只是填个背景了~~你想到什么更好的办法来处理了吗？

这里抛出多一个问题，直接上图，看下面的图：

有没注意到后面多出来的类橙色的一截，这截东西是什么？（Chrome下可以inspect到，Firefox没有）

这个多余的东西加上线的长度就等于父级的宽度（这个线没有设置width，且为block level的元素）

这是在《CSS权威指南》一书，第7章节水平格式化这一小节的时候了解到的。

潜在问题

不是所有东西都是完美的，BFC也不例外，在提供了轻巧灵活的排版布局的同时，也带了较大的潜在问题，那就是overflow了，都知道这个属性的副作用，超出范围裁减，也就是实现BFC的时候，要考虑到如果有绝对定位或者需要通过偏移调整位置实现特殊效果的需求，那么这会个很头疼的问题。

对于结构有一点要求，触发的元素必须位于最后一位。

参考链接

前端精选文摘：BFC 神奇背后的原理

深入理解BFC和Margin Collapse

那些年我们一起清除过的浮动

什么是BFC

说说标准

云服务器 GPU云服务器深度学习的一些应用关于物联网的应用 java的一些代码 php实用的一些代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111217.html

关于BFC的一些应用

摘要：关于的概念性介绍就不赘述了，网上有很多关于此的介绍，后面也罗列了些个人认为很不错的文摘。那今天要说的是关于它的一些技巧性应用，通过示范比较常会接触到的排版布局方面的需求来说明下。对于结构有一点要求，触发的元素必须位于最后一位。关于Block Formatting Context(BFC)的概念性介绍就不赘述了，网上有很多关于此的介绍，后面也罗列了些个人认为很不错的文摘。那今天要说的...

CntChen 2019-08-01 14:58 评论0 收藏0
关于CSS里BFC特性的理解和应用

摘要：它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。而，块级格式化上下文，就是一个块级元素的渲染显示规则。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。什么是BFC（Block Formatting Context） Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念...

shixinzhang 2019-08-29 16:34 评论0 收藏0
关于CSS里BFC特性的理解和应用

摘要：它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。而，块级格式化上下文，就是一个块级元素的渲染显示规则。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。什么是BFC（Block Formatting Context） Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念...

vspiders 2019-08-02 11:24 评论0 收藏0
CSS: 潜藏着的BFC

摘要：而就潜藏在其中，当你修改样式时，一不小心就能触发它而毫无察觉，因此没有意识到的神奇之处。实例解决侵占浮动元素的问题我们知道浮动元素会脱离文档流，然后浮盖在文档流元素上。在写样式时，往往是添加了一个样式，又或者是修改了某个属性，就达到了我们的预期。而BFC就潜藏在其中，当你修改样式时，一不小心就能触发它而毫无察觉，因此没有意识到BFC的神奇之处。一、什么是BFC（Block Form...

learn_shifeng 2019-08-29 13:54 评论0 收藏0