BFC规范
BFC规范
BFC规范是什么?
BFC规范也叫块级格式化上下文。是指一个独立的容器。
如何触发BFC?
我们可以通过一下几种方式触发BFC
1.通过浮动触发:float(除none)
2.通过绝对\固定定位触发:position:absolute\flxed
3.通过display触发:display:inline-block\flex\table-cells
4.通过overflow触发:overflow:hidden\auto\scroll
什么时候需要触发BFC?
1、上下块级元素的margin相叠加的时候。
style:
.box1{
width: 300px;
height: 200px;
background: red;
margin:20px 0;
}
.box2{
width: 300px;
height: 200px;
background: blue;
margin:50px 0;
}
.box{
overflow: hidden;
}
html:
<div class="box">
<div class="box1"></div>
</div>
<div class="box">
<div class="box2"></div>
</div>
2、解决margin传递问题
style:
.box1{
background: red;
border:1px solid #ccc;
overflow: hidden;
}
.box2{
width: 300px;
height: 100px;
background: blue;
margin-top:50px;
float: left;
}
html:
<div class="box1">
<div class="box2"></div>
</div>
3.解决浮动问题
style:
.box1{
background: red;
border:1px solid #ccc;
overflow: hidden;
}
.box2{
width: 300px;
height: 100px;
background: blue;
float: left;
}
html:
<div class="box1">
<div class="box2"></div>
</div>
4、解决覆盖问题
style:
.box1{
background: red;
width: 300px;
height: 100px;
border:1px solid #ccc;
float: left;
}
.box2{
overflow: hidden;
height: 300px;
background: blue;
}
html:
<div class="box1"></div>
<div class="box2">154545</div>
可以实现左边固定,右边自适应的两栏布局。
BFC规范的更多相关文章
- 5月23日——谈谈对BFC规范的理解
一.什么是BFC? BFC(block formatting context):简单来说它就是一种属性,这种属性会影响元素与元素之间的位置.间距 二.形成BFC的条件 1.float:给元素添加浮动 ...
- 对BFC规范的理解
什么是BFC? BFC 全称为 块级格式化上下文(Block Fromatting Context),是Web页面的可视化CSS渲染出的一部分.它是块级盒布局出现的区域,也是浮动层元素进行交互的区域. ...
- 关于浮动&关于BFC规范&whyoverflow清除浮动
https://www.cnblogs.com/smivico/p/7656270.html 浮动 https://www.jianshu.com/p/4b93eecb090e BFC https:/ ...
- 【深入BFC】 关于CSS中float布局,清除浮动,和margin合并的原理解析,解开你心中的那些困惑!
BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...
- 浅谈BFC和IFC
先说说FC,FC的含义就是Fomatting Context.它是CSS2.1规范中的一个概念. 它是页面中的一块渲染区域.而且有一套渲染规则,它决定了其子元素将怎样定位.以及和其它元素的关系和相互作 ...
- 浅析CSS里的 BFC 和 IFC
前端日刊 登录 浅析CSS里的 BFC 和 IFC 2018-01-29 阅读 1794 收藏 3 原链:segmentfault.com 分享到: 前端必备图书<Web安全开发指南 掌握白 ...
- 浏览器的差距、ie6 ie7 ie8、符号、html css、BFC、
1.浏览器的差距 浏览器默认的字体是16px,谷歌的最小字体是12px,其他是10px 2.ie6.ie7.ie8. hack:就是针对不同的浏览器去不同的html,css样式,从而让各个浏览器能达到 ...
- 【css】浅谈BFC
定义: 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. BFC的布 ...
- 前端人员不要只知道KFC,你应该了解 BFC、IFC、GFC 和 FFC
前言 说起KFC,大家都知道是肯德基,但面试官问你什么是BFC.IFC.GFC和FFC的时候,你是否能够像回答KFC是肯德基时的迅速,又或者说后面这些你根本就没听说过,作为一名前端开发工程师,以上这些 ...
随机推荐
- CH2101 可达性统计(算竞进阶习题)
拓扑排序+状态压缩 考虑每一个点能够到达的所有点都是与该店相邻的点的后继节点,可知: 令f[u]表示u点可到达的节点个数,f[u]={u}与f[v](u, v)的并集 于是可以利用状态压缩,能够到达的 ...
- 【BZOJ2655】calc DP 数学 拉格朗日插值
题目大意 一个序列\(a_1,\ldots,a_n\)是合法的,当且仅当: 长度为给定的\(n\). \(a_1,\ldots,a_n\)都是\([1,m]\)中的整数. \(a_1, ...
- 【LOJ#6029】市场(线段树)
[LOJ#6029]市场(线段树) 题面 LOJ 题解 看着就是一个需要势能分析的线段树. 不难发现就是把第二个整除操作化为减法. 考虑一下什么时候整除操作才能变成减法. 假设两个数为\(a,b\). ...
- 一点理解之 CmBacktrace: ARM Cortex-M 系列 MCU 错误追踪库
@2019-02-14 [小记] CmBacktrace: ARM Cortex-M 系列 MCU 错误追踪库,用来将单片机故障状态寄存器值翻译出来输出至终端上以便排错 CmBacktrace: AR ...
- 「NOI2016」优秀的拆分 解题报告
「NOI2016」优秀的拆分 这不是个SAM题,只是个LCP题目 95分的Hash很简单,枚举每个点为开头和末尾的AA串个数,然后乘一下之类的. 考虑怎么快速求"每个点为开头和末尾的AA串个 ...
- [HAOI2015]按位或(容斥+前缀和)
题目描述 刚开始你有一个数字0,每一秒钟你会随机选择一个[0,2^n-1]的数字,与你手上的数字进行或(c++,c的|,pascal 的or)操作.选择数字i的概率是p[i].保证0<=p[i] ...
- poj 3186 Treats for the Cows(dp)
Description FJ has purchased N (1 <= N <= 2000) yummy treats for the cows who get money for gi ...
- [luogu1970][花匠]
题目地址 https://www.luogu.org/problemnew/show/P1970 题目描述 花匠栋栋种了一排花,每株花都有自己的高度.花儿越长越大,也越来越挤.栋栋决定 把这排中的一部 ...
- MVC控制器传递多个实体类集合到视图的方案总结
MVC控制器向视图传递数据包含多个实体类的解决方案有很多,这里主要针对视图模型.动态模型以及Tuple三种方法进行一些总结与记录. 基础集合类:TableA namespace ViewModelSt ...
- MVC知识点汇总
一,MVC创建控制器,视图 1新建 ASP.NET MVC web应用程序项目,在Controllers文件夹下创建控制器,MVC 5 控制器,然后打开控制器,在所对应的控制器中会存在一个Action ...