【基础总结（02）--BFC（块级格式化上下文）】的更多相关文章

CSS2系列：BFC(块级格式化上下文)IFC(行级格式化上下文)

BFC 块级格式化上下文,不好理解,我们暂且把她理解成"具有特殊的一类元素" 哪些元素会生成BFC? 根元素 float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible 代码注释很重要 <html> <head> <title></title> <s…

BFC块级格式化上下文

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

BFC——块级格式化上下文

BFC(块级格式化上下文) 一.BFC是什么? 从样式上看,具有BFC的容器和普通的容器没有区别.从功能上看,具有BFC的容器可以看作是隔离了的容器,容器里面的元素不会影响到外面的元素,并且BFC具有普通容器没有的一些特性,例如可以包含浮动元素,上文中的第二类清除浮动的方法(如overflow方法)就是触发了浮动元素的父元素BFC,使到它可以包含浮动元素,从而防止出现高度塌陷的问题. 简单来说,BFC就是一种属性.这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用. 二.BFC的触发 浮动…

BFC块级格式化上下文简述

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

我理解的BFC(块级格式化上下文)

BFC(Block formatting context) 直译为"块级格式化上下文". BFC它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. 白话文: 孩子在家里愿意怎么折腾都行,但是出了家门口,你就的乖乖的,不能影响外面的任何人. 不是所有的元素模式都能产生BFC,w3c 规范: display 属性为 block, list-item, table 的元素,会产生BFC. 大家有…

BFC(块级格式化上下文)

转载自:https://www.cnblogs.com/asheng2016/p/7281784.html https://blog.csdn.net/jiaojsun/article/details/76408215 什么是BFC 常见的文档流分为:定位流.浮动流.普通流3种. 1.普通流: 在普通流中,元素按照其在 HTML 中的先后位置自上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行,除非另外指定,否则所有元素默认都是普通流定位,也可…

BFC(块级格式化上下文)笔记

BFC特性: 1.BFC是一个独立的布局容器,内部元素不会影响BFC外面的元素,反之亦然. 2.计算BFC高度时,会计算内部的浮动元素. 3.BFC会阻止外边距的合并. 4.BFC的区域不会与外部浮动元素的区域重叠 触发条件: 1. float不为none 2.position: fixed absolute 3.overflow: hidden scroll auto 4.display: inline-block/ table-cell/ table-caption / flex /inli…

基础总结（02）--BFC（块级格式化上下文）

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…

BFC 详说 Block Formatting Contexts (块级格式化上下文)

定位方案是控制元素的布局,在 CSS 2.1 中,有三种定位方案——普通流 (Normal Flow) .浮动 (Floats) 和绝对定位 (Absolute Positioning) ,下面分别对这三种布局简略说明一下. 普通流(Normal Flow) 在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行, 除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在…

BFC(Box,Formatting,Context) —— 块级格式化上下文

Box:CSS布局的基本单位 Formatting context是页面中的一块渲染区域,最常见的是BFC和IFC,CSS3增加了GFC和FFC BFC定义:块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与,它规定了内 部的Block-level Box如何布局,并且与这个区域外部毫不相关. BFC布局规则: (1)内部的Box会在垂直方向,一个接一个地放置 (2)Box垂直方向的距离由margin决定.属于同一个BFC的两个相邻Box的margin会发生重叠 (…