什么是BFC，haslayout

BFC（Block Formatting Context）意思为“块级格式化范围”

是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。也可以说BFC就是一个作用范围。可以把它理解成是一个独立的容器，并且这个容器的里box的布局，与这个容器外的毫不相干。

haslayout：构建一个独立的空间，对其他标签不会造成影响。

时间： 2024-11-18 07:46:59

什么是BFC，haslayout的相关文章

CSS BFC hasLayout模型

BFC(Block Formatting Context),简单讲,它是提供了一个独立布局的环境,每个BFC都遵守同一套布局规则.例如,在同一个BFC内,盒子会一个挨着一个的排,相邻盒子的间距是由margin决定且垂直方向的margin会重叠.而float和clear float也只对同一个BFC内的元素有效. 非块级盒子的浮动元素.绝对定位元素及块级容器(比如inline-blocks,table-cells和table-captions),以及overflow属性是visible之外任意值的

BFC / hasLayout

BFC - block formatting context 1.float的值不能为none 2.overflow的值不能为visible 3.display的值为table-cell,table-caption,inline-block中的任何一个 4.position的值不为relative和static 5.width , height , min-width , min-height 不为auto hasLayout ie浏览器 1.writing-mode 2.-ms-writing

【转】关于Block Formatting Context－－BFC和IE的hasLayout

转自穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”. 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局.一个环境中的元素不会影响到其它环境中的布局.比如浮动元素会形成BFC,浮

bfc+css

CSS BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.在创建了 Block Formatting Context 的元素中,其子元素会一个接一个地放置.垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性.在 Block Formatting Context 中相邻的块级元素的垂直边距会折叠(collapse). 当涉及到可视化布局的时候,Block Formatting

css清浮动处理

在CSS布局中float属性经常会被用到,但使用float属性后会使其在普通流中脱离父容器,让人很苦恼 1 浮动带来布局的便利,却也带来了新问题 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Clear float</title> 6 <style type="tex

css重要属性之辩

一.relative 1)与兄弟 relative对absolute 1.限制left/top/right/bottom定位 2.限制z-index层级: 3.限制在overflow下 relative对fixed  限制z-index层级: 2)本身特征 定位 1.相对自身 定位移动相对于自身 2.无侵入 relative定位不影响其他元素 margin影响其他元素布局 应用 拖拽效果 同时设置top/bottom left/right 绝对定位:拉伸 相对定位:斗争 top VS botto

561

雪碧图技术 sprite 精灵图compass=合并 宽高相同雪碧图自动循环 兼容性reset重置技术 normalize技术加前缀 —weblcit— —moz— —o— —ms—(!Doceype)解析css中的Hack技术 不同浏览器显不同的方向的内容倒入包(引入)opacity=filter( 0-100)png背景 =导包(插件)园角 导包 图片bfc 200m 无限IEF触发BFChaslayout技术双倍margin兼容性问题IE下3PX差距font-size 10px以下=审查元

你所不了解的float（滥用float的怪异现象） (转)

阅读目录 float设计初衷就是为了实现文字环绕效果 如何解决浮动造成的父容器塌陷? 兼容各浏览器清除浮动的通用方式 滥用浮动 运用浮动的一些特性 浮动与布局 浮动与单侧固定布局 浮动与智能自适应的流体布局 让IE7飙泪的浮动问题 包含clear的浮动元素包裹不正确 浮动元素倒数2个莫名垂直间距bug 浮动元素倒数2个浮动最后一个字符重复bug 浮动元素与文本不在同一行的问题 如何使用float不出现上述所述怪异现象 回到顶部 float设计初衷就是为了实现文字环绕效果 原本页面流布局显示如上图

你所不了解的float（滥用float的怪异现象）

float设计初衷就是为了实现文字环绕效果 原本页面流布局显示如上图所示,运用了float属性后就显示为如下图所示,这就是浮动的设计初衷 float的一些特性:包裹性.破坏性. 包裹的特性其实主要有三个表现:收缩.坚挺.隔绝. float破坏性主要表现在使父容器塌陷(浮动使得父容器塌陷是标准而非bug,否则如果不让父窗口塌陷怎么实现文字环境效果) 浮动的破坏性只是单纯的为了实现文字环绕效果 BFC(block format context)块级格式化上下文 如何解决浮动造成的父容器塌陷? 也就是

clear清浮动

转自:http://www.cnblogs.com/dolphinX/p/3508869.html 在CSS布局中float属性经常会被用到,但使用float属性后会使其在普通流中脱离父容器,让人很苦恼 1 浮动带来布局的便利,却也带来了新问题 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Cl