博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
BFC
阅读量:4954 次
发布时间:2019-06-12

本文共 1073 字,大约阅读时间需要 3 分钟。

(1)什么是BFC与IFC

a、BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格式化上下文。常规流(也称标准流、普通流)是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文,你可以把BFC想象成一个大箱子,箱子外边的元素将不与箱子内的元素产生作用。

b、BFC是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的。也可以说BFC就是一个作用范围。

c、在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ,类型可以是 block ,或者是 inline ,但不能同时属于这两者。并且, Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化, Inline boxes(块内框) 则在 Inline Formatting Context(行内格式化上下文) 里格式化。

(2)如何产生BFC

当一个HTML元素满足下面条件的任何一点,都可以产生Block Formatting Context:
a、float的值不为none
b、overflow的值不为visible
c、display的值为table-cell, table-caption, inline-block中的任何一个
d、position的值不为relative和static

CSS3触发BFC方式则可以简单描述为:在元素定位非static,relative的情况下触发,float也是一种定位方式。

(3)BFC的作用与特点

不和浮动元素重叠,清除外部浮动,阻止浮动元素覆盖

如果一个浮动元素后面跟着一个非浮动的元素,那么就会产生一个重叠的现象。常规流(也称标准流、普通流)是一个文档在被显示时最常见的布局形态,当float不为none时,position为absolute、fixed时元素将脱离标准流。

转载于:https://www.cnblogs.com/CoderZX/p/10635074.html

你可能感兴趣的文章
最长递增子序列问题
查看>>
IIS發佈網站的時候遇到的問題
查看>>
有效的沟通非常重要
查看>>
zoj 1028 Flip and Shift(数学)
查看>>
递归与回调函数
查看>>
asp.net中关于《%=》《%#》《%》 的用法——(转帖)
查看>>
机械按键硬件防抖动
查看>>
Linux VmWare安装虚拟机(centos6.9)
查看>>
函数式接口
查看>>
css伪元素选择器
查看>>
【Android】实现类似QQ列表
查看>>
android 让一个控件按钮居于底部的几种方法
查看>>
android systemUI--Notification 整理
查看>>
收音代码分析
查看>>
WIN7局域网文件共享设置方法
查看>>
Could not connect to '192.168.89.144' (port 22)
查看>>
读程序是怎样跑起来的第二章
查看>>
Spring Boot:使用Rabbit MQ消息队列
查看>>
JS刷新frame框架
查看>>
C#窗体程序显示当前版本号方便查看更新
查看>>