bfc | 易学教程

分析浮动及清除浮动影响

阅读更多关于分析浮动及清除浮动影响

1、浮动定义(float设置) 浮动，顾名思义，就是使文本内容浮起来和动起来，浮指的是：脱离文档流，动指的是：向设置的方向移动。脱离文档流将会导致文档内容高度等不会被常规计算，会造成常见的文本覆盖、高度塌陷等问题影响布局效果，例如： 2、清除浮动常规的有以下几种： 1、设置clear:both：不允许两边有浮动现象，在浮动元素后的非浮动元素中设置，clear的值有：none|both|left|right; 2、overflow:hidden:应用BFC原理，将盒子变为独立的块级上下文，在这个独立的块级上下文中会计算浮动元素的高度，可用于解决高度塌陷的问题； 3、应用::after,::before等伪元素：在选中的盒子内创建虚假的节点，在设置clear:both等属性，清除浮动示例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>test2</title> </head> <body> <div class="main"> <div class

CSS中的各种FC

阅读更多关于 CSS中的各种FC

什么是FC？ Formatting Context，格式化上下文，指页面中一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context，块级格式化上下文，一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。 BFC的约束规则内部的BOX会在垂直方向上一个接一个的放置；垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的俩个相邻的BOX的margin会发生重叠，与方向无关。）每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此。（这说明BFC中的子元素不会超出它的包含块，而position为absolute的元素可以超出它的包含块边界）； BFC的区域不会与float的元素区域重叠；计算BFC的高度时，浮动子元素也参与计算； BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然； BFC的应用防止margin发生重叠防止发生因浮动导致的高度塌陷怎么生成BFC float的值不为none； overflow的值不为visible； display的值为inline-block、table-cell、table-caption；

CSS中的IFC和BFC入门

阅读更多关于 CSS中的IFC和BFC入门

CSS中的IFC和BFC入门提到CSS，首先会想到的就是盒模型，如果对于盒模型不是很理解的，看这里。这是一个基础的系列，看了盒模型还可以看看box-sizing,好了不多说了，下面介绍今天的重点。首先从概念入门，B是Block,I是inline,F [ Formatting ] C [context]。一句话概括就是格式化上下文一个是块级，一个是行级。 BFC有如下规则：内部的盒子会在垂直方向，一个个的放置； BFC是页面上的一个隔离的容器属于同一个BFC 的两个相邻Box 的上下margin 会发生重叠计算BFC的高度时，浮动元素也参与计算 BFC的区域不会与float重叠；触发BFC的条件： body 根元素；浮动元素：float 不为none的属性值；绝对定位元素：position (absolute、fixed) display为： inline-block、table-cells、flex overflow 除了visible以外的值 (hidden、auto、scroll) 这里提出一点，规则是作用于BFC内部的元素，而条件则是作用于BFC容器的，这点要理解。这些只是概念，要想理解，还得结合一些例子来看。布局规则一二条是概念，就不介绍了。第三条： .p { width : 200px ; height : 50px ; margin

50道 CSS 经典题

阅读更多关于 50道 CSS 经典题

1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2 box-sizing属性？用来控制元素的盒子模型的解析模式，默认为content-box context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽 border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽 3 CSS选择器有哪些？哪些属性可以继承？ CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）可继承的属性：font-size, font-family, color 不可继承的样式：border, padding, margin, width, height 优先级（就近原则）：

快速理解BFC原理

阅读更多关于快速理解BFC原理

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

理解 BFC

阅读更多关于理解 BFC

网上有太多关于BFC的文章，看了很多，还是不能理解。想想还是看全英文的官方文档，关于BFC的规则，在w3c文档中的第9章和第10章全局搜一下Block formatting context，就能找到。什么是BFC CSS中每个元素都会根据盒模型生成0个或多个Box，Box是布局的对象和基本单位，Visual formatting model描述了一套规则，决定元素如何对其内容进行布局，以及与其他元素的关系和作用。盒布局由以下几个方面组成：盒的尺寸和类型（明确指定、受限或没有指定行内级盒、块级盒）盒布局方案（常规流、浮动、绝对定位）文档树中元素之间的关系其他如视口、图片大小等对于浮动布局，由float属性决定对于绝对定位布局，由position属性决定而对于常规流的布局，则与display属性有很大关系根据display属性的计算值，可以将box分为块级盒和行内级盒块级盒 display的计算值为 block, list-item 或 table 行内级盒 display的计算值为 inline, inline-block 或 inline-table 在常规流中，不同的Box会参与不同formatting context（在这个格式化上下文中有一套渲染规则），block-level box（块级盒）参与block formatting context

BFC布局

阅读更多关于 BFC布局

我们常说的文档流分为普通流、浮动流与定位流三种。 FC( formatting context格式化上下文 )，指的是一块渲染区域，依靠渲染规则，决定其子元素如何布局及与其他元素的关系和作用。 FC分为BFC、IFC、GFC和FFC，其中BFC(block formatting context)块级格式化上下文 BFC特点 1.内部的box会在垂直方向上，一个接一个地放置 2.box垂直方向的距离由margin决定，属于同一个bfc的两个box相邻的margin会发生重叠 3.每个 box的左边，与包含box的box的左边相接触，即使存在float box 4. bfc的区域不会与float box重叠 5.bfc是一个隔离的独立容器，容器内的子元素不会影响外面的元素 6. 计算高度时浮动元素也参与 BFC触发条件 1. 根元素，即html 2. float不为none 3.position为absolute或fixed 4. display为inline-block、table-cell、table-caption、flex、inline-flex 5. overflow不为visible 常见应用 1.清除浮动元素通过设置overflow:hidden 闭合浮动，这个不做赘述 2.margin叠加 <!DOCTYPE html> <html> <head> <meta

BFC的概念及作用

阅读更多关于 BFC的概念及作用

在了解什么是BFC之前，首先得明白什么是Box , Formatting Context （一个决定如何渲染文档的容器）的概念 Box: CSS布局的基本单位 Box是 CSS 布局的对象和基本单位，直观点来说，就是一个页面是由很多个 Box组成的，元素的类型和display属性，决定这个BOX的类型，不同类型的BOX，会参与不同的Formatting Context，因此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，若为block-level box 设置inline-block则会产生BFC run-in box: css3 中才有，这儿先不讲了 Formatting Context ：是W3C CSS2.1规范中的一个概念，它是页面中的一块渲染区域，并且有一套渲染规则，他觉得了子元素如何定位，

【tf.keras】Resource exhausted: OOM when allocating tensor with shape [9216,4096] and type float on /job:localhost/replica:0/task:0/device:GPU:0 by allocator GPU_0_bfc

阅读更多关于【tf.keras】Resource exhausted: OOM when allocating tensor with shape [9216,4096] and type float on /job:localhost/replica:0/task:0/device:GPU:0 by allocator GPU_0_bfc

运行以下类似代码： while True: inputs, outputs = get_AlexNet() model = tf.keras.Model(inputs=inputs, outputs=outputs) model.summary() adam_opt = tf.keras.optimizers.Adam(learning_rate) # The compile step specifies the training configuration. model.compile(optimizer=adam_opt, loss='categorical_crossentropy', metrics=['accuracy']) # load weights from h5 file model.load_weights('alexnet_weights.h5') 最后会报错： OP_REQUIRES failed at cwise_ops_common.cc:70 : Resource exhausted: OOM when allocating tensor with shape[9216,4096] and type float on /job:localhost/replica:0/task:0/device:GPU:0 by allocator GPU_0_bfc

两列布局——左侧宽度固定，右侧宽度自适应的两种方法

阅读更多关于两列布局——左侧宽度固定，右侧宽度自适应的两种方法

　　今天做了一个练习，要求用两种方法来实现左侧宽度固定、右侧宽度自适应的两列布局。一开始我以为会很简单，毕竟只是练习，但是我写出了一种方法之后却没能顺利的写出第二种方法。对于网上的一些解决方法我还是不太满意，于是自己继续琢磨着，问问一些前辈，希望得到一些思路。终于，皇天不负有心人，在自己翻译的一篇关于 BFC 的文章上，我找到了解决的方法。　　关于左侧宽度固定，右侧宽度自适应两列布局的一种很常用的方法我相信大家都知道。就是利用左侧元素浮动，或者绝对定位的方式使其脱离常规文档流，让两个块级元素能够在同一行显示。然后右侧元素 margin-left 的值等于左侧元素宽度，这时右侧元素将紧挨着左侧元素，由于块元素的宽度会自动默认充满剩下的屏幕，所以就实现了右侧自适应的效果了。 HTML代码如下： <!DOCTYPE> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="test.css" type="text/css"> </head> <body> <div class="one"></div> <div class="two">第一种方法</div> </body> </html> CSS代码如下： .one {

订阅 bfc