BFC(格式化上下文)
来源:互联网 发布:模拟美股软件 编辑:程序博客网 时间:2024/09/21 08:56
一、BFC是什么?
初识块级格式化上下文(Block Formatting Contexts)它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
二、哪些元素会生成BFC?
如何触发BFC
满足下面任意一个条件的元素会触发BFC:
根元素或其它包含它的元素浮动 (元素的 float 不为 none)绝对定位元素 (元素的 position 为 absolute 或 fixed)行内块 inline-blocks (元素的 display: inline-block)表格单元格 (元素的 display: table-cell,HTML表格单元格默认属性)表格标题 (元素的 display: table-caption, HTML表格标题默认属性)overflow 的值不为 visible的元素弹性盒 flex boxes (元素的 display: flex 或 inline-flex)
BFC处理浮动
通常我们清除浮动,方法有几种:
设置空div
在父容器末尾添加空div,并设置clear:both清除浮动。这样很方便,但违背结构与表象分离的原则。
设置overflow
虽然设置其他属性也能引发BFC属性,但会对布局造成一些影响。设置overflow:hidden的影响相对较小,但在子元素的过大时,超出部分会被覆盖掉,设置auto或scroll又会产生滚动条。
:after伪元素
通过为容器添加:after伪元素,并给伪元素设置overflow属性,添加IEhack,实现清除浮动。也是网上使用比较多的方法。
.clearfix{(*zoom: 1;} .clearfix:after{content:”;height:0;display:block; clear:both;/overflow:hidden; /*clear,overflow二选其一*/}
IE6、7下的BFC
由于早期IE6、7对于不支持BFC,所以需要通过IEhack解决。在IE6、7中,通过触发hasLayout私有属性实现BFC效果。从使用上看,hasLayout私有属性和BFC触发方式都是通过特有属性触发,IE6、7中大多通过设置zoom:1;触发,zoom用于设置或检索元素缩放比例,值1表示元素实际尺寸,所以设置1不会对元素显示造成影响。
总结
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
0 0
- BFC(格式化上下文)
- CSS格式化上下文(BFC)
- BFC(块级格式化上下文)
- css中BFC格式化上下文
- BFC-块级格式化上下文
- 格式化上下文的介绍—BFC
- BFC(块格式化上下文)知识点整理
- BFC块级格式化上下文简述
- CSS--BFC(块级格式化上下文)
- 浅谈BFC块状格式化上下文环境
- CSS BFC(块级格式化上下文)
- BFC(块级格式化上下文)
- 深入BFC块级格式化上下文
- BFC(块级格式化上下文)
- 清除浮动及 BFC(块级格式化上下文)
- (转)理解块级格式化上下文——BFC
- BFC环境(block formatting context块级格式化上下文)
- 块格式化上下文(BFC)布局规则及常见情景
- 线段树
- 使用classloader加载文件
- C# Task.WhenAll Parallel
- 二叉排序树
- Linux目录学习Q&A
- BFC(格式化上下文)
- VPN服务基础理论学习
- Android 源码分析之okhttp3(builder二)
- 6.1.2
- 复杂链表的复制
- Python模块——random
- WeChat 聊天记录从一台手机转移到另外一台手机的注意事项
- servlet总概述
- 圣诞节,哪里的女生最幸福——由京东评论看幸福指数