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是肯德基时的迅速,又或者说后面这些你根本就没听说过,作为一名前端开发工程师,以上这些 ...
随机推荐
- Python中xlwt解析
1.导入模块 import xlwt 2.构造excel表 workbook = xlwt.Workbook() #返回一个工作簿对象 3.构造sheet w ...
- [SP1043] GSS1 - Can you answer these queries I
传送门:>Here< 题意:求区间最大子段和 $N \leq 50000$ 包括多组询问(不需要支持修改) 解题思路 线段树的一道好题 我们可以考虑,如果一组数据全部都是正数,那么问题等同 ...
- River Problem HDU - 3947(公式建边)
River Problem Time Limit: 6000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tot ...
- python学习日记(函数--装饰器)
楔子 前提,我有一段代码(一个函数). import time def run_time(): time.sleep(0.1) print('我曾踏足山巅') 需求1:现在,我想计算这段代码的运行时间 ...
- Install Nagios (Agent) nrpe client and plugins in Ubuntu/Debian
安装apt-get install nagios-nrpe-server nagios-plugins 修改nrpe.cfgvi /etc/nagios/nrpe.cfg修改Allow Host,添加 ...
- 记OI退役
前言 (这篇本来在联赛前写了一点,但是一直没有发布.现在退役了,还是把它发出来留作纪念吧!) 其实,这篇随笔早该在停课时就写,可是我却迟迟没有动笔. 可能是我真的太懒了,或许也是我想要逃避自己内心的真 ...
- [ZJOI2016]大森林(LCT)
题目描述 小Y家里有一个大森林,里面有n棵树,编号从1到n.一开始这些树都只是树苗,只有一个节点,标号为1.这些树都有一个特殊的节点,我们称之为生长节点,这些节点有生长出子节点的能力. 小Y掌握了一种 ...
- centos7/rhel7下配置PXE+Kickstart自动安装linux系统
应用场景:临时安装一个系统或者批量安装linux系统,无需人工介入选择下一步,减少在安装系统上的时间浪费,提高工作效率. DHCP + TFTP + Syslinux + FTP + Kickstar ...
- Python中生成器generator和迭代器Iterator的使用方法
一.生成器 1. 生成器的定义 把所需要值得计算方法储存起来,不会先直接生成数值,而是等到什么时候使用什么时候生成,每次生成一个,减少计算机占用内存空间 2. 生成器的创建方式 第一种只要把一个列表生 ...
- C# DateTimePicker控件获取他的年,月,日,时,分,秒
CustomFormat属性设置为: yyyy-MM-dd HH:mm:ss 记住还要修改一个属性值,DateFormat属性 可选项改为Custom,默认是Long