学习BFC

【学习BFC】的更多相关文章

BFC全称是Block Formatting Context,即块格式化上下文.它是CSS2.1规范定义的,关于CSS渲染定位的一个概念.要明白BFC到底是什么,首先来看看什么是视觉格式化模型. 视觉格式化模型视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制,它也是CSS中的一个概念. 视觉格式化模型定义了盒(Box)的生成,盒主要包括了块盒.行内盒.匿名盒(没有名字不能被选择器选中的盒)以及一些实验性的盒(未来可能添加到规范中).盒的…

从0开始学习BFC

为什么需要BFC? <style> .red { background: red; } .blue { background: #1890ff; } .green { background: green; } p { margin: 20px 0; } </style> <body> <p class="red">1</p> <p class="blue">2</p> <p c…

BFC给我的帮助以及对hasLayout的认识

布局的时候经常想让一个或几个元素并并排的放在一起,有时给其中的一个浮动,元素是在一行了,可还是都左边重叠了,总是这样那样改来改去,小白的我也是醉了! 今天偶然间看到了了BFC这个东东,虽然现在还是不是很深入的了解,但至少一行不用在在上面的问题上浪费时间了(捂脸). 一.什么是BFC? BFC(Block Formatting Context)直译为“块级格式化范围”. W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.当涉及到可视化布局的…

近视BFC

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

CSS魔法堂：hasLayout原来是这样!

前言过去一直听说旧版本IE下很多诡异bug均由一个神秘角色引起的,那就是hasLayout.趁着最近突然发神经打算好好学习CSS,顺便解答多年来的疑惑. hasLayout到底是何方神圣? hasLayout可以简单看作是IE5.5/6/7中的BFC(Block Formatting Context).也就是一个元素要么自己对自身内容进行组织和尺寸计算(即可通过width/height来设置自身的宽高),要么由其containing block来组织和尺寸计算.而IFC(即没有拥有布局)而言,…

CSS3与页面布局学习总结（四）——页面布局大全BFC、定位、浮动、7种垂直居中方法

目录一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z-index属性 2.6.菜单 2.7.:target伪类三.浮动 3.1.float取值 3.2.float的特性 3.3.清除浮动 3.3.1.清除外部浮动 3.3.2.清除内部浮动四.多种居中办法 4.1.块标签自身水平居中 4.2.块标签内对齐 4.3.垂直居中方法一 4.4.垂直居中方法…

【转】css学习专题-BFC

css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 containing block 顶部起一个接一个垂直排列,水平方向上撑满整个宽度 (除非内部的盒子自己内部建立了新的 BFC). developer center上面有对BFC的一段描述: 一个 block formatting context 是web页面可视化CSS渲染的一个部分,是一块 block b…