bfc

本文转载于: 猿2048 网站➥ https://www.mk2048.com/blog/blog.php?id=i00bciibaa 什么是BFC BFC全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。要明白BFC到底是什么，首先来看看什么是视觉格式化模型。 视觉格式化模型 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制，它也是CSS中的一个概念。 视觉格式化模型定义了盒（Box）的生成，盒主要包括了块盒、行内盒、匿名盒（没有名字不能被选择器选中的盒）以及一些实验性的盒（未来可能添加到规范中）。盒的类型由 display 属性决定。 块盒（block box） 块盒有以下特性： 当元素的CSS属性 display 为 block ， list-item 或 table 时，它是块级元素 block-level； 视觉上呈现为块，竖直排列； 块级盒参与(块格式化上下文)； 每个块级元素至少生成一个块级盒，称为主要块级盒(principal block-level box)。一些元素，比如 <li> ，生成额外的盒来放置项目符号，不过多数元素只生成一个主要块级盒。 行内盒（inline box） 当元素的CSS属性 display 的计算值为

前言 什么是BFC？ 在解释 BFC 是什么之前，需要先介绍Box（块级，行级...）、FormattingContext的概念。 Box: CSS布局的基本单位&盒模型 盒模型--块级盒/行内盒 一个盒包括了内容(content)、边(border)、内边距(padding)、外边距(margin)。下图展示了盒模型的直观意义： 盒的尺寸（width与height--计算得到的offsetWidth和offsetHeight）定义受到box-sizing属性的影响。box-sizing可选择content-box(默认)和border-box两种模式。分别代表两种盒子模型:W3c标准盒模型和IE盒子模型。ie8后开始支持通过CSS3属性box-sizing，让我们可以自由选择采用哪种盒子。 w3c标准盒模型--块级盒 width = content-width + padding-width + border-width height = content-height + padding-height + border-height IE盒子模型--块级盒 width = content-width height = content-height 行内盒 1.width、height不起作用，盒子高度由内容决定(font-size/line-height)决定 2.margin

本文讲了BFC的概念是什么； BFC的约束规则；咋样才能触发生成新的BFC；BFC在布局中的应用：防止margin重叠(塌陷,以最大的为准)； 清除内部浮动；自适应两（多）栏布局。 1. BFC 是什么？ Block fomatting context = block-level box + Formatting Context Box: 　　Box即盒子模型； block-level box即块级元素 display属性为block, list-item, table的元素，会生成block-level box；并且参与 block fomatting context； inline-level box即行内元素 display 属性为 inline, inline-block, inline-table的元素，会生成inline-level box。并且参与 inline formatting context； Formatting context 　　Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系、相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: i'm training some Music Data on a LSTM-RNN in Tensorflow and encountered some Problem with GPU-Memory-Allocation which i don't understand: I encounter an OOM when there actually seems to be just about enough VRAM still available. Some background: I'm working on Ubuntu Gnome 16.04, using a GTX1060 6GB, Intel Xeon E3-1231V3 and 8GB RAM. So now first the part of the error-message which i can understand, in the and i will add the whole error message in the end again for anyone who might ask for it to help: I tensorflow/core/common_runtime/bfc

BFC BFC (Block formatting context) “块级格式化上下文” 它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。 触发 满足下列条件之一就可触发BFC 　　【1】根元素，即HTML元素 　　【2】float的值不为none 　　【3】overflow的值不为visible 　　【4】display的值为inline-block、table-cell、table-caption 　　【5】position的值为absolute或fixed 特性 【1】阻止垂直外边距（margin-top、margin-bottom）折叠 属于同一个BFC的两个相邻块级子元素（元素都要在文档流中）的上下margin会发生重叠―― 分为两个BFC就可以消除这种margin 重叠 < style > .dv { width : 400 px ; height : 400 px ; border : 1 px solid slateblue ; } .dv2 { width : 200 px ; height : 100 px ; background : salmon ; margin-bottom : 30 px ; } .dv3 { width : 200 px ; height : 100 px ; margin-top

在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案: 普通流 (normal flow) 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。 浮动 (float) 在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。 绝对定位 (absolute positioning) 在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。 Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 那么 BFC 是什么呢？ BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。 具有 BFC 特性的元素可以看作是 隔离了的独立容器 ，容器里面的元素不会在布局上影响到外面的元素，并且 BFC

学习目标: 理解BFC 了解渐进增强和优雅降级 typora-copy-images-to: media --- BFC(Block formatting context) 直译为"块级格式化上下文"。 我们前面讲过 元素的显示模式 display。 分为 块级元素 行内元素 行内块元素 ，其实，它还有很多其他显示模式。 不是所有的元素模式都能产生BFC，w3c 规范： display 属性为 block, list-item, table 的元素，会产生BFC. 大家有么有发现这个三个都是用来布局最为合理的元素，因为他们就是用来可视化布局。 注意其他的，display属性，比如 line 等等，他们创建的是 IFC ，我们暂且不研究。 这个BFC 有着具体的布局特性： 有宽度和高度 ， 有 外边距margin 有内边距padding 有边框 border。 就好比，你有了练习武术的体格了。 有潜力，有资质。 以上盒子具有BFC条件了，就是说有资质了，但是怎样触发才会产生BFC，从而创造这个封闭的环境呢？ 在好比，你光有资质还不行，你需要一定额外效果才能出发的武学潜力，要么你掉到悬崖下面，捡到了一本九阴真经，要么你学习葵花宝典，欲练此功必先.... 同样，要给这些元素添加如下属性就可以 触发BFC 。 -float属性不为none -position为absolute或fixed

什么是BFC 在一个web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks,table-cells,和table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建BFC（块级上下文）。 为了便于理解，我们换一种方式来重新定义BFC。一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可： 1. float的值不是none。 2.position的值不是static或者relative。 3.display的值是inline-block、table-cell、flex、table-caption或者inline-flex 4.overflow的值不是visible BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。 怎么创建BFC 要显式的创建一个BFC是非常简单的，只要满足上述4个CSS条件之一就行。例如： <div class = "container" > 你的内容 </div> 在类container中添加类似 overflow:

normal flow(普通流,常规流)将窗体自上而下分成一行一行，块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素。一个连续具有逻辑上下的页面整体,出现在页面中的显示内容,均可以理解为文档流中。 2.BFC(Block formatting context) 块级格式化上下文，它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 3.BFC规则 内部的Box会在垂直方向,一个接一个地放置。 Box自身垂直方向的位置由margin-top决定，属于同一个BFC的两个相邻Box的margin会发生重叠。 Box自身水平方向的位置由margin左或右决定(具体已经参照BFC方位)，属于同一个BFC的两个相邻Box的margin会发生叠加。 通过让元素浮动,可以使元素在水平上左右移动,再通过margin属性调整位置,就是使当前元素脱离文档流,相当于浮动起来一样,浮动的框可以左右移动,直至它的外边缘遇到包含框或另一个浮动框的边缘。 float:left | right 对附近的元素布局造成改变,使得布局混乱。 因为i浮动元素脱离了文档流,会出现一种高度坍塌的现象:原来的父容器高度是当前元素撑开的,但是当该元素浮动后,脱离文档流浮动起来,那父容器的高度就会坍塌

本文总结自饥人谷―方方老师：CSS深入浅出 什么是BFC？为什么这个概念一直被提起？？为什么每一个人都解释不清BFC？？？ 什么是BFC？ BFC 全称为 块格式化上下文 (Block Formatting Context) 。 从这个概念里你能看出来什么吗？ 这个名字给我们的信息只有 “块” “格式化” “上下文” 。我们大概可以了解到这个东西是对上下文起作用的。 那里的上下文？？ HTML文档！ 它大概的作用，貌似是格式化上下文？？可能不是我们通常意义中的格式化。 我们没有从这个名字中得到太多有用的信息，仅仅知道它是一种功能，针对于 HTML文档 起作用。 那我们去看看官方是怎么解释的。 MDN： 一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。 一个块格式化上下文由以下之一创建： 根元素或其它包含它的元素 浮动元素 (元素的 float 不是 none) 绝对定位元素 (元素具有 position 为 absolute 或 fixed) 内联块 (元素具有 display: inline-block) 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性) 表格标题 (元素具有 display: table