总结下对我对于CSS中BFC的认知

【总结下对我对于CSS中BFC的认知】的更多相关文章

总结下对我对于CSS中BFC的认知

首先第一个,什么是BFC? BFC的全称叫Block Formatting Context (块级格式化上下文)BFC是css中隐含属性,开启BFC后元素会变成一个独立的布局环. 简单来说,它是一个独立渲染的区域,在这个区域的元素和外部的不相干,即使子元素怎么写怎么设置也不会超出父元素的内部,举个简单例子这个独立的区域相当于个房间,里面的人出不去外边的人进不来. 使用方法(推荐) overflow属性的auto / scroll / hidden这三个属性都可以让父元素生…

理解CSS中BFC

BFC(Block Formatting Context) 是Web页面中盒模型布局的CSS渲染模式.它的定位体系属于常规文档流 .摘自 W3C : 浮动,绝对定位元素, inline-blocks , table-cells , table-captions ,和overflow 的值不为 visible 的元素,(除了这个值已经被传到了视口的时候)将创建一个新的块级格式化上下文 . 上面的引述几乎总结了一个 BFC 是怎样形成的.但是让我们以另一种方式来重新定义以便能更好的去理解.一个…

html/css中BFC的开启、关闭、作用

什么是BFC BFC是什么并不重要.重要的是开启它干嘛?以及如何开启它根据W3C的标准,在页面中元素都一个隐含的属性叫做Block Formatting Context(块级格式化环境)简称BFC 开启元素的BFC后,元素会有如下特性: 1.父元素的垂直外边距不会和子元素重叠. 2.开启BFC的元素不会被浮动的元素所覆盖. 3.开启BFC的元素可以包含浮动的子元素. 在以下情况下,会自动开启BFC: 1.设置元素浮动(此方法,虽然可以撑开父元素,但是会导致父元素的宽度丢失,也会导致下边的元…

css中bfc和ifc

bfc定义:块级格式化上下文,他是一个独立的渲染区域,他规定了这个内部如何布局,并且与这个区域的外部毫不相干.BFC布局规则: 内部的Box会在垂直方向,一个接一个地放置.Box垂直方向的距离由margin决定.属于同一个BFC的两个相邻Box的margin会发生重叠每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反).即使存在浮动也是如此.BFC的区域不会与float box重叠,常用来清除浮动和布局.BFC就是页面上的一个隔离的独…

CSS中BFC规则

何为BFC BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. BFC规则内部的Box会在垂直方向,一个接一个地放置. Box垂直方向的距离由margin决定.属于同一个BFC的两个相邻Box的margin会发生重叠. 每个元素的margin box的左边, 与包含块border box的左边相接触(对…

浅析CSS中的BFC和IFC

1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性决定,box的类型分为block-level box 和inline-level box(不包括css3的时候).不同类型的box参与不同类型的formatting context布局. Block-level elements are those elements of the source do…