定义 块级格式化上下文   特性 1.内部box在垂直方向,一个接一个放置 2.box垂直方向的间距由margin决定    属于同一个BFC的相邻box的margin会发生重叠(外边距重叠)      解决方法:给父元素加overflow:hidden,并把其中一个子元素放进另一个box中  3.每个子元素的margin-left与包含块的左边(父元素且有相对定位和boeder-left)相接触(对于从左往右的格式化,否则相反)浮动也一样     即margin-left和border-lef…

1.概念,全称是block format context,块级格式化上下文 2.触发条件 根元素 float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible 3.应用场景 自适应两栏布局 <style> body { width: 300px; position: relative; } .aside { wi…

BFC——一个我们容易忽视掉的布局神器 今天给大家说说BFC这个概念,在说概念前,先给大家看个例子: 首先,定义三个div块元素   效果: 我们发现,块级元素的排列顺序是从上往下,一块接着一块,在w3c中,是这样解释block-level box的: 在一个块级排版上下文中,盒子是从包含块顶部开始,垂直的一个接一个的排列的. 相邻两个盒子之间的垂直的间距是被margin属性所决定的,在一个块级排版上下文中相邻的两个块级盒之间的垂直margin是折叠的 咱们看个例子: 代码如下: 在图中我们发现…

  今天给大家说说BFC这个概念,在说概念前,先给大家看个例子: 首先,定义三个div块元素   效果: 我们发现,块级元素的排列顺序是从上往下,一块接着一块,在w3c中,是这样解释block-level box的: 在一个块级排版上下文中,盒子是从包含块顶部开始,垂直的一个接一个的排列的. 相邻两个盒子之间的垂直的间距是被margin属性所决定的,在一个块级排版上下文中相邻的两个块级盒之间的垂直margin是折叠的 咱们看个例子: 代码如下: 在图中我们发现,在给两个块级元素设置同样的marg…

网上看了很多 BFC 的概念,发现都说得不是很完整和深入,刚好最近看了一些视频教程说到了 BFC 概念所以记录一下. BFC 的概念: BFC 全称:Block format context 块级格式化上下文. BFC 的特性: BFC 的垂直外边距会和兄弟节点的外边距发生重叠 BFC 内部的元素不会影响外部的元素,同样,外部的元素不会影响 BFC 内部的元素 BFC 不会与浮动元素发生重叠 BFC 元素的高度计算会包括元素内的浮动元素的高度 如何创建 BFC: 1. float 的值不为 no…

首先按照常规解释一下名词,BFC(Block formatting context)直译为"块级格式化上下文".一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局和渲染,并且有一套自己的渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用,并且与这个区域外部毫不相干. 然后大脑出现三个???,那接着往下看,我们在清除浮动的时候一般利用三个方法,伪元素::after.空<div>盒子,还有给父元素…

一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行,除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在 HTML 文档中的位置决定. 浮动 (float) 在浮动布局中,元素首先按照普通流的位置出现,然后根据浮动的…

.BFC概念: 块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响. 我们先了解一个名词:BFC(block formatting context),中文为“块级格式化上下文”. 先记住一个原则: 如果一个元素具有BFC,那么内部元素再怎么翻江倒海,翻云覆雨,都不会影响外面的元素.所以,BFC元素是不可能发生margin重叠的,因为margin重叠会影响外面的元素的:BFC元素也可以用来清除浮动带来的影响,因为如果不清除,子元素浮…

10 分钟理解 BFC 原理 一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行,除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在 HTML 文档中的位置决定. 浮动 (float) 在浮动布局中,元素首先按照普…

一.常见定位方案 二.BFC 概念 BFC 即 Block Formatting Contexts (块级格式化上下文),它属于上述定位方案的普通流. 它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. 通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部. 三.BFC 布局规则 内部的Box会在垂直方向,一个接一个地放置: Box垂直方向的距离由m…