我们在前端的学习过程中常常会遇到BFC,用BFC来解决一些margin塌陷.margin合并清理浮动流的问题 那么问题来了,我们所说的BFC到底是个什么东西呢: 什么是BFC BFC(Block Formatting Context)即“块级格式化上下文.我来简单的解读一下: 1.块级对应单词Block,不难想到的就是display中block属性,block属性是将此元素作为块级元素显示,根据块级元素的特性进行渲染,具体的特性下文再来细说. 2.格式化Formatting,格式化这个此相信不用

前面我们讲到了绝对定位,在这篇文章中,我们将讲到3种定位模型中的浮动模型.主要参考 张鑫旭在慕课网的 深入理解float 那些年我们一起清过的浮动---by 一丝丝凉 精通CSS 注意:第二小节基本参考一丝丝凉的内容,看过这篇就可以略过我的那部分内容. 1. 浮动 浮动:浮动的框可以左右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘.和绝对定位元素一样,使用浮动后,该元素也会脱离文档流,即浮动框不属于文档中的普通流.当一个元素浮动之后,不会影响到块级框的布局而只会影响内联框(通常是文本)的排

两个概念 感觉BFC挺重要的,于是最近查阅网上资料后小结一下,如果有不对的地方还望指正. 先理解两个概念: BOX :盒子模型 Block-Leave Box :块级元素 display属性为block, list-item, table的元素,会生成block-level box,并且参与 block fomatting context: Inline-Leave Box : 行内元素 display 属性为 inline, inline-block, inline-table的元素,会生成i

转载http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的.元素的类型和 display 属性,决定了这个 Box 的类型. 不同类型的 Box, 会参与不同的 Formatting Context(

什么是BFC(Block formatting contexts) BFC的通俗理解: 首先BFC是一个名词,是一个独立的布局环境,我们可以理解为一个箱子(实际上是看不见摸不着的),箱子里面物品的摆放是不受外界的影响的.转换为BFC的理解则是:BFC中的元素的布局是不受外界的影响(我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响.)并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列. BFC的运用 在w3c的规范中,除了上

简介 在清除浮动一文中提到BFC不会被浮动元素遮盖,并没有详细探究表现行为.规范中指出,在同一个BFC内,作为子元素的BFC的border-box不应该覆盖同为子元素的浮动元素的margin-box.其实,浏览器在内部通过隐式的给子BFC设置margin值来防止覆盖. 例证 创建两个浮动元素和一个BFC,然后改变BFC的margin值和浮动元素的margin值,观察它们的位置. .f1r { background: skyBlue; float: left; width: 200px; } .f

   1.什么是BFC 其实在老师让我们写这篇叫BFC的时候,我跟本不知道有什么BFC的东西. 后来,我找了一些资料,知道了,BFC是Block Formatting Context (块级格式化上下文)的缩写,它是W3C CSS 2.1 规范中的一个概念,是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. 2.什么情况下会创建BFC CSS规范说明了在下列这些情况下会创建新的block format

深入理解定位父级offsetParent及偏移大小 [转载] 前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWidth这四个属性.当然,还有一个偏移参照——定位父级offsetParent.本文将详细介绍该部分内容 定位父级 在理解偏移大小之前,首先要理解offsetParent.人们并没有把offsetParent翻译为偏移父级,而是翻译成定位父级

最初这篇文章打算回答寒冬大神的第一问,谈谈CSS布局.本来呢我以为布局主要涉及float跟display相关属性,以及他们的包含框.静态位置等等.后来看了大神的一片面试文章,嗯?这里怎么还有个BFC,这是神马东东.待我搜索一下,萨萨萨,不看不知道,越看越糊涂,这到底是个神马东东...经过一个周时间的查阅资料和自我思考,在此总结一下我对BFC的认识,愿与各位道友分享,欢迎拍砖! 对CSS有了解的道友们肯定都知道盒式模型这个概念,对一个元素设置CSS,首先需要知道这个元素是block还是inline

BFC 在上一篇文章中,清除浮动方法解析,我们谈及了一些使用css属性解决浮动带来的影响.但是在解决浮动带来的影响的方法中,如果细心思考,会产生如下疑问: 为什么overflow可以清除浮动带来的影响? 能否用其他css属性清除浮动带来的影响? 种种的疑问,会让你觉得CSS真的不容易精通,说精通过于高大上,就连掌握都挺难的. 在清除浮动方法解析文章中,只是稍微说明了一下上面两个问题的原因是BFC(块级格式化上下文,Block Formatting Contexts).在分享BFC之前,有必要谈谈

今天在这里谈谈css中BFC.“BFC”是Block Formatting Context的缩写,这个概念是由CSS2.1提出来的,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.满足以下任何一条件,即可形成“BFC”. 1.float的值不为none. 2.overflow的值不为visible. 3.display的值为table-cell, table-caption, inline-block中的任何一个. 4.position的值不为relative和static.

CSS盒子模型 包含元素内容(content).内边距(padding).边框(border).外边距(margin) 一般元素总宽度 = element的width+padding的左右边距+margin左右边距值+border的左右宽度 高度同理 外边距合并 上下外边距会合并一般发生在普通文档流中,行内框,浮动框或绝对定位之间外边距不会合并 一般合并的外边距会取那个较大的值 Box-sizing属性(content-box|border-box|inherit) Content-box: 总

在 web 页面布局中,有三种控制元素版式布局的模型: 普通流 (Flow) 元素在 HTML 中按照先后位置从上至下的流式排列方式布局. 浮动流(Float) 在浮动布局中,元素首先按照普通流的位置呈现,然后根据浮动的方向向左边或右边偏移. 定位流(Position) 在绝对定位布局中,元素会整体脱离普通流,而元素的具体位置由绝对定位的坐标决定. BFC 即 Block Formatting Contexts (块级格式化上下文),它属于普通流.具有 BFC 特性的元素可以看作是隔离了的独立容

对CSS有了解的道友们肯定都知道盒式模型这个概念,对一个元素设置CSS,首先需要知道这个元素是block还是inline类型.而BFC就是用来格式化块级盒子,同样管理inline类型的盒子还有IFC,以及其他的FC.那首先我们就来看一下FC的概念.  Formatting Context:指页面中的一个渲染区域,并且拥有一套渲染规则,他决定了其子元素如何定位,以及与其他元素的相互关系和作用. BFC:块级格式化上下文,它是指一个独立的块级渲染区域,只有Block-level BOX参与,该区域拥

一.BFC概念 BFC即Block Formatting Contexts(块级格式化上下文),它属于普通流.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其他子元素将如何定位,以及和其他元素的关系和相互作用.具有BFC特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且BFC具有普通容器所没有的一些特性. 二.触发BFC条件(只要元素满足以下任意一条即触发BFC特性) body根元素 浮动元素:float除none以外的值 绝对定位元素:positio

前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWidth这四个属性.当然,还有一个偏移参照——定位父级offsetParent.本文将详细介绍该部分内容 定位父级 在理解偏移大小之前,首先要理解offsetParent.人们并没有把offsetParent翻译为偏移父级,而是翻译成定位父级,很大原因是offsetParent与定位有关 定位父级off

前言 这篇是在慕课网上跟着张鑫旭重走CSS之路的第三篇学习笔记了,主要是学习float属性,闲话少说,下面进入正文. float的历史 要想了解一个东西,我们还是需要从本质去了解它,那么我们就需要问一个直抵本质的问题:float被设计出来是干嘛的? 答案是:实现文字环绕效果.对,就是这么简单因为这个属性是在很久很久以前就有了,那个时候是没有那么多炫酷的CSS效果的,所以这个属性设计的初衷很简单,就是实现文字环绕. float的特性 我们知道float的特性有两个,一个是包裹,一个就是破坏.下面就

一,margin .标准文档流,margin在竖直方向的不叠加,以较大的为准 .使用margin: auto;的盒子必须有明确的width,并且只有标准文档流的盒子 才能使用margin: auto; .善于使用父亲的padding而不是儿子的margin; 二,css精灵 .css精灵优点,减少http请求 .通过background-position来控制显示位置 .background-attachment:fixed; 背景图片固定,不随滚动条滚动 精灵的使用 background ur

前言 CSS有三种基本的布局机制:普通流.浮动和绝对定位.利用定位,可以准确地定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置.但元素究竟如何定位,定位到什么位置,主要依靠top/right/bottom/left这四个偏移属性.本文就定位中的偏移做详细介绍 position定位 值: static | relative | absolute | fixed | inherit 初始值: static 应用于: 所有元素 继承性: 无 static:

定位:定位在中间,放大缩小时也不会跑偏. position:absolute; top: 50%; left: 50%; margin: -270px 0 0 -455px; 解释:定位后,设百分比的位置,再设置外边距. 浮动:span等行内元素不能设置宽高,但在浮动后可以设置宽高. <style> span { width: 200px; height: 200px; background: red; float: left; } </style> <span>qqq

盒模型 盒模型 除了图片表单元素之外,基本所有标签都可以看做一个盒子 盒模型的要素 父子关系之间用padding 兄弟关系之间用margin margin padding border 后面跟的值的顺序 上右下左 如果跟了一个值 :上下左右 如果跟了两个值 :上下 左右 如果跟了三个值 : 第四个和右一样 上 左右 下 如果跟了四个值 :上 右 下 左 width和height 标签内容的宽高,不是盒子的宽高 padding 内边距 内边距是标签内容和边框的距离 padding的颜色和标签内容一