1、(Block Formatting Contexts)BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不 ...
分类:
其他好文 时间:
2016-12-03 23:31:56
阅读次数:
257
一、何为BFC 块级格式化上下文(Block Formatting Context)是网页CSS视觉渲染的一部分,并用于决定盒子的布局。在定位体系中属于常规流(Normal Flow)(另外两种定位体系为浮动(Floats)和绝对定位(Absolute Positioning))。 二、BFC如何形... ...
分类:
Web程序 时间:
2016-12-01 21:51:45
阅读次数:
207
一、BFC与IFC 1.1、BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格式化上下文。常规流(也称标准流、普通流)是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属 ...
分类:
Web程序 时间:
2016-12-01 09:46:25
阅读次数:
393
恢复内容开始 传说中的双飞燕布局?好吧 预期效果。 左右两侧 固定像素100px,中间自适应剩余区域 1. 左float + 右float + 中 设为BFC(overflow:hidden) 注意不可用clear属性,此外 main区域需要位于left right之后 HTML结构 CSS 2. ...
分类:
其他好文 时间:
2016-11-24 14:17:38
阅读次数:
186
1.1 清除浮动 清除浮动: 根据情况需要来清楚浮动 。 清除浮动的目的: 就是为了解决 父 盒子高度为0 的问题。 清除浮动: 1. 额外标签法 2. Overflow: hidden 触发 bfc 模式 就不用清楚浮动 3. 伪元素 .clearfix:after { content:””; V ...
分类:
其他好文 时间:
2016-11-21 19:36:02
阅读次数:
139
今天给大家说说BFC这个概念,在说概念前,先给大家看个例子: 首先,定义三个div块元素 效果: 我们发现,块级元素的排列顺序是从上往下,一块接着一块,在w3c中,是这样解释block-level box的: 在一个块级排版上下文中,盒子是从包含块顶部开始,垂直的一个接一个的排列的。 相邻两个盒子之 ...
分类:
其他好文 时间:
2016-11-12 19:34:54
阅读次数:
150
BFC——一个我们容易忽视掉的布局神器 今天给大家说说BFC这个概念,在说概念前,先给大家看个例子: 首先,定义三个div块元素 效果: 我们发现,块级元素的排列顺序是从上往下,一块接着一块,在w3c中,是这样解释block-level box的: 在一个块级排版上下文中,盒子是从包含块顶部开始,垂 ...
分类:
Web程序 时间:
2016-11-12 14:12:58
阅读次数:
180
分析了两列自适应布局的实现思路后,会觉得三列自适应布局的实现原理其实和他一模一样,不过是多了一个盒子而已。 第一类,浮动在前: 方法一:float+margin 方法二:float+BFC 第二类,主要内容在前: 方法三:float+负边距+relative 这里和两列布局有些不同,在两列布局中,. ...
分类:
其他好文 时间:
2016-11-11 01:29:40
阅读次数:
246
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等)。虽然我知道如何利用 BFC 解决这些问题,但当别人问我 BFC 是什么,我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spe ...
分类:
其他好文 时间:
2016-10-13 07:44:59
阅读次数:
229
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等)。虽然我知道如何利用 BFC 解决这些问题,但当别人问我 BFC 是什么,我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spe ...
分类:
其他好文 时间:
2016-10-10 14:13:21
阅读次数:
177