BFC(块级格式化上下文)布局规则 1.元素垂直排列. 2.同一个BFC相邻两个元素的margin会重叠. 3.BFC区域不会与浮动元素重叠. 4.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素.反之也如此. 5.计算BFC的高度时,浮动元素也参与计算. 如何创建BFC 1.根元素 2.浮动float 3.absolute或fixed 4.overlfow部位visible 5.display为inline-block, table-cell, table-capti…

本文转载(https://segmentfault.com/a/1190000013647777) 一.BFC的概念 1.规范解释 块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域. 2.通俗解释: BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品. 如果一个元素符合触发BFC的条件,则该元素中的…

渲染规则 1.内部的box会在垂直方向,一个接一个的放置 2.box垂直方向的距离由margin决定,属于同一个bfc的两个相邻box的margin会发生重叠 3.每个元素的margin box的左边,与包含块border box的左边相接触(对于从做往右的格式化,否则相反) 4.bfc的区域不会与float box重叠 5.bfc就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素.反之也是如此 6.计算bfc的高度时,浮动的元素也参与计算 7.bfc的区域若没有设置固定的wi…

一.块级格式化上下文(BFC) 1.什么是块级格式化上下文? Block Formatting Contexts (BFC,块级格式化上下文)就是一个块级元素 的渲染显示规则 (可以把 BFC 理解为一个封闭的大箱子,,容器里面的子元素不会影响到外面的元素) 2.触发BFC的条件如下: 根元素 float的值不为none. overflow 除了 visible 以外的值(hidden,auto,scroll) display的值为table-cell, table-caption, inlin…

CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案.定位方案用以控制元素的布局,在CSS2.1中,有三种定位方案——普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inline元素水平排列,直到行被占满后换行,block元素则被渲染为完整的一行,除非指定,所有元素默认为普通流定位. 浮动:浮动布局中,元素首先按照普通流位置出现,然后根据浮动方向尽可能向左或右偏移,效果与文本环绕相似. 绝对定位:元素会脱离普通流,因此绝对定位元素不会对其兄弟元素产生影响(与float不…

在CSS2.1中,有三种定位方案--普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inline元素水平排列,直到行被占满后换行,block元素则被渲染为完整的一行,除非指定,所有元素默认为普通流定位. 浮动:浮动布局中,元素首先按照普通流位置出现,然后根据浮动方向尽可能向左或右偏移,效果与文本环绕相似. 绝对定位:元素会脱离普通流,因此绝对定位元素不会对其兄弟元素产生影响(与float不同),元素的具体位置由坐标位置决定. BFC是属于普通流,因此它对兄弟元素也不产生影响. 一…

做过页面编写的各位应该对定位不陌生了,这个样式表中的重头戏,也是最难把控的元素之一,今天在这里我们要讲到的就是与浮动与清除浮动相关的定位元素,对于定位有很多种,有绝对定位,还有相对定位,固定定位,静态定位,对于这几种耳熟能详的定位在这里我们不必花费时间去讨论,我们今天要关注的是另一种神奇的定位,也就是所谓的bfc,对于前面几个定位,都会或多或少产生一些后遗症,影响它的兄弟元素的位置和父元素产生高度塌陷,这个不仅会影响内部的元素,还会对外部的元素产生影响,经常会弄得很头疼,往往为了移动某一个很小的…

平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外界元素的重叠现象. 先了解几个概念:可替换元素.不可替换元素(non-replaced element).包含块(containing block).块级格式化上下文(BFC). 可参考css2.1 中文规范 1.可替换元素与不可替换元素 根据css1 中所述:所谓可替换元素就是浏览器根据元素的标签…

相信大家和我一样,第一次听到别人说CSS 块级格式化上下文(block formatting context,简称:BFC)的时候一头雾水,为了帮助大家弄清楚块级格式化上下文,我翻阅了W3C的CSS规范,把和块级格式化上下文有关的资料整理了出来. 先介绍一下普通流,普通流就是我们口中常说的文档流.在CSS 2.1的规范中有两段关于普通流的描述: Normal flow. In CSS 2.1, normal flow includes block formatting of block-leve…

BFC块级格式化上下文 触发条件 overflow 值不为 visible 的块元素 根元素 html 元素 浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 absolute 或 fixed) display 为这类值... flow-root inline-block table-cell flex inline-flex 应用 外边距塌陷 让浮动内容和周围的内容等高 2栏布局 MDN:块格式化上下文 CSS深入理解流体特性和BFC特性下多栏自适应布…