BFC浅析
1.定义
BFC(Block formatting context)即"块级格式化上下文"。它是一个独⽴的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部无关。
block-level box:display 属性为 block, list-item, table 的元素,会生成 block-level box。并且参与 block fomatting context;
2.BFC布局的规则:
- 内部的Box会在垂直方向,一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发⽣生重叠。
- 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页⾯上的一个隔离的独立容器,容器⾥面的⼦子元素不会影响到外面的元素,外面的元素也同样不会影响到容器里面的元素。
- 计算BFC的高度时,浮动元素也参与计算。
3.如何生成BFC?
- 根元素;
- float属性不为none;
- position为absolute或fixed;
- display为inline-block, table-cell, table-caption, flex, inline-flex;
- overflow不为visible.
4.BFC的作用
- 清除内部浮动,防止父元素塌陷
.wrap{
/*overflow: hidden;*/如果不在wrap生成一个BFC,内部div浮动,其父div的高度就会塌陷.
width:300px;
border:1px solid red;
}
.inner{
float:left;
width:100px;
height:100px;
background-color: blue;
} .outer{
width:120px;
height:150px;
background-color: green;
}
<div class="wrap">
<div class="inner">inner</div>
</div>
<div class="outer">outer</div>
- 防止垂直方向margin 重叠
.wrap{
width:300px;
border:1px solid red;
}
.top{ width:100px;
height:100px;
background-color: blue;
margin-bottom: 100px;
} .bottom{
margin-top: 100px;
width:100px;
height:100px;
background-color: green;
}
<div class="top">top</div>
<div class="bottom">bottom</div>
上面两个div的垂直间距在页面上其实只有100px;这是因为它们同处在根元素的BFC中,同一个BFC的两个相邻Box的margin会发生重叠(具体多少,从两个margin的值中取大值).解决方式的话就是让它们处于不同的BFC中,可以在其中一个div外面套一个div,外面的div设置overflow:hidden;
.wrap{
overflow: hidden;
width:300px;
border:1px solid red;
}
.top{ width:100px;
height:100px;
background-color: blue;
margin-bottom: 100px;
} .bottom{
margin-top: 100px;
width:100px;
height:100px;
background-color: green;
}
<div class="wrap">
<div class="top">top</div>
</div>
<div class="bottom">bottom</div>
总之,BFC就是一个独立的容器,它里面的元素和外面的元素互不影响.
BFC浅析的更多相关文章
- BFC与合并 浅析
BFC BFC 全称 Block Formatting Context.每个渲染区域用formatting context表示,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用在正常流中的盒 ...
- 浅析CSS里的 BFC 和 IFC
前端日刊 登录 浅析CSS里的 BFC 和 IFC 2018-01-29 阅读 1794 收藏 3 原链:segmentfault.com 分享到: 前端必备图书<Web安全开发指南 掌握白 ...
- 【转】浅析BFC及其作用
1. 什么是BFC BFC(block formatting context):简单来说,BFC 就是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用. 中文译为块级格式化上下文.是 ...
- 浅析CSS中的BFC和IFC
1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...
- BFC之浅析篇
BFC是什么呢? 掏粪男孩? 当然不是咯.BFC,英文名Block formatting context,直译为“块级格式化上下文”.它是W3C CSS 2.1规范中的一个概念,决定了元素如何对内容进 ...
- 浅析BFC布局的概念以及作用
BFC的概念以及作用 BFC的定义: (Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box参与 ...
- 浅析前端BFC布局
一.常见定位方案 二.BFC 概念 BFC 即 Block Formatting Contexts (块级格式化上下文),它属于上述定位方案的普通流. 它是一个独立的渲染区域,只有Block-leve ...
- 浅析BFC及其作用
本文链接:https://blog.csdn.net/riddle1981/article/details/52126522
- BFC之宽度自适应布局篇
说到自适应布局,我们曾在“抛砖引玉之宽度自适应布局”一文中学习过.当时的核心思想主要是利用float+margin的形式.利用块状元素的流体特性,然后计算出float元素的宽度,并赋予到块状元素的相应 ...
随机推荐
- BZOJ 2851: 极限满月 虚树 or 树链的并
2851: 极限满月 Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 170 Solved: 82[Submit][Status][Discuss] ...
- Spoj REPEATS 后缀自动机+set
REPEATS - Repeats 链接:http://www.spoj.com/problems/REPEATS 题意:求S串中某个子串连续循环次数最多的次数. 想法: 从暴力开始,枚举所有串,求出 ...
- java基础—线程(一)
一.线程的基本概念
- shell脚本,awk利用NF来计算文本显示的行数。
解释: 1.awk 'NF{a++;print a,$0;next}1' file4 首先判断NF是否存在值,第一行第二行第三行第四行都存在,进行执行后面的输出,输出后碰到next后,就结束了后面的操 ...
- java在线聊天项目1.3版设计好友列表框功能补充,因只要用户登录就发送一串新列表,导致不同客户端好友列表不同问题
解决完毕后效果图: 好友列表Vector添加的时候进行判断,如果有相同的则不添加 int flag=0; for (int i = 0; i < names.size(); i++) { if ...
- JSON.stringify(value[, replacer[, space]])
1. JSON.stringify(value[, replacer[, space]]);value 必需 对象或数组,需要转换成json字符串的数据replacer 可选 函数或数组space 可 ...
- (72)zabbix监控日志文件 MySQL日志为例
一般情况下,日志最先反映出应用当前的问题,在海量日志里面找到我们异常记录,然后记录下来,并且根据情况报警,大家可以监控系统日志.nginx.Apache.业务日志. 这边我拿常见的MySQL日志做监控 ...
- mysql 的 case when 用法
正确的格式: case when condition then result when condition then result when condition then result else re ...
- 【nginx】 FastCGI sent in stderr: "Primary script unknown" while reading response header from upstream
2013/10/22 20:05:49 [error] 12691#0: *6 FastCGI sent in stderr: "Primary script unknown" w ...
- Thinkhphp5控制器调用的Model层的方法总结
控制器器里: <?php /** * Created by PhpStorm. * User: Haima * Date: 2018/7/8 * Time: 15:58 */ namespace ...