摘要:最常见的有简称和简称。的区域不会与重叠。也就是说只要父容器形成就可以,触发方式见上清除浮动比较好的方法以上用,用更好的方法自适应布局触发自适应属性对比参考资料张鑫旭老师的博客
本文是从之前的csdn上的乱七八糟的笔记整理过来的
概念Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。BFC,块级格式化上下文,是一个独立的渲染区域,只有block-level-box级别参与,规定了内部如何布局并且和外部毫不相干
布局规则内部的Box会在垂直方向,一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时,浮动元素也参与计算
如何触发BFC根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
用途
清除浮动
原理:BFC可以包含浮动
我们可以利用BFC的这个特性来“清浮动”,这里其实说清浮动已经不再合适,应该说包含浮动。
也就是说只要父容器形成BFC就可以,触发BFC方式见上
清除浮动比较好的方法:
ie8以上用clearfix:after
ie6,7用clearfix{*zoom:1;}
更好的方法:
.clearfix:after{content:"";display:table;clear:both;}
自适应布局
Document
触发BFC自适应属性对比
张鑫旭老师的博客
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/111630.html
摘要:规范文档,行内非替换元素背景高度由字体和字体大小决定的,默认处理和行高没关系,不过这只是浏览器现在的处理方法摘自参考。不过实际上这个对样式的影响不是很大或者设置。的值除了也是可以为数值的。的区域不会与重叠。 摘要 刚看了一个关于前端面试题的帖子,有些css题虽然能答出来,但出于学习的目的与好奇心,觉得有必要加深一下对功能实现原理的了解。整理出一份文档,共勉。 正文 行内元素的高 ...
摘要:规范文档,行内非替换元素背景高度由字体和字体大小决定的,默认处理和行高没关系,不过这只是浏览器现在的处理方法摘自参考。不过实际上这个对样式的影响不是很大或者设置。的值除了也是可以为数值的。的区域不会与重叠。 摘要 刚看了一个关于前端面试题的帖子,有些css题虽然能答出来,但出于学习的目的与好奇心,觉得有必要加深一下对功能实现原理的了解。整理出一份文档,共勉。 正文 行内元素的高 ...
摘要:属性,会破坏文档流,与非定位元素很难结合起来用,因此也不适合自适应布局。,其对无感,无法自适应剩余浏览器空间。总结的定义,就如同结界一样,完全封闭对外无任何影响。引起的各种属性与自适应布局自适应布局与属性说明 BFC的定义 BFC的全称是block formatting context(块状格式化上下文),当BFC起作用的时候,其元素内部无论怎么翻江倒海都不会影响到外部元素,同样,外部...
摘要:的概念以及作用的概念以及作用的定义的定义直译为块级格式化上下文。是的首字母缩写,直译过来是格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用。BFC的概念以及作用 BFC的定义: (Block formatting context)直译为块级格式化上下文。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内...
阅读 3692·2021-10-12 10:11
阅读 1939·2019-08-30 15:53
阅读 1549·2019-08-30 13:15
阅读 2271·2019-08-30 11:25
阅读 1770·2019-08-29 11:24
阅读 1616·2019-08-26 13:53
阅读 3487·2019-08-26 13:22
阅读 1712·2019-08-26 10:24