BFC概念和作用,触发条件
1、概念,全称是block format context,块级格式化上下文
2、触发条件
根元素 float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
3、应用场景
自适应两栏布局
<style>
body {
width: 300px;
position: relative;
} .aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
} .main {
height: 200px;
background: #fcc;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
清除浮动
<style>
.par {
border: 5px solid #fcc;
width: 300px;
overflow:hidden;
} .child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
防止垂直 margin 重叠
<style>
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p>
<p>Hehe</p>
</body>
BFC概念和作用,触发条件的更多相关文章
- BFC的布局规则以及触发条件
1 .BFC的含义 : Block Formatting Contexts(BFC) 块级元 ...
- BFC的布局规则和触发条件
1 .BFC的含义 : Block Formatting Contexts(BFC) 块级元素格式化上下 ...
- hasLayout与BFC的触发条件
hasLayout与BFC是分别在IE和其他浏览器上的两个作用很相近的概念,在很多时候,我们需要触发它们去实现有些效果.例如清除浮动时需要触发hasLayout与BFC:很多自适应的两栏和三栏布局(两 ...
- 浅析BFC布局的概念以及作用
BFC的概念以及作用 BFC的定义: (Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box参与 ...
- Linux用户抢占和内核抢占详解(概念, 实现和触发时机)--Linux进程的管理与调度(二十)
1 非抢占式和可抢占式内核 为了简化问题,我使用嵌入式实时系统uC/OS作为例子 首先要指出的是,uC/OS只有内核态,没有用户态,这和Linux不一样 多任务系统中, 内核负责管理各个任务, 或者说 ...
- BFC概念及应用
定义 块级格式化上下文 特性 1.内部box在垂直方向,一个接一个放置 2.box垂直方向的间距由margin决定 属于同一个BFC的相邻box的margin会发生重叠(外边距重叠) ...
- Nginx 502错误触发条件与解决办法汇总(转载)
一些运行在Nginx上的网站有时候会出现“502 Bad Gateway”错误,有些时候甚至频繁的出现.有些站长是在刚刚转移到Nginx之后就出现了这个问题,所以经常会怀疑这是不是Nginx的问题,但 ...
- PO BO VO DTO POJO DAO 概念及其作用
PO BO VO DTO POJO DAO 概念及其作用(附转换图) 博客分类: java javadaovopojobo J2EE开发中大量的专业缩略语很是让人迷惑, 特别是对于刚毕业 ...
- 10、网页制作Dreamweaver(扩展:各浏览器对 onunload 事件的支持与触发条件实现有差异)
标准参考 在 HTML 4.01 规范中关于 onunload 事件的描述是:当 document 从 window 中移除时,触发 onunload 事件. 关于 HTML 4.01 规范中 onu ...
随机推荐
- 86. Partition List (List)
Given a linked list and a value x, partition it such that all nodes less than x come before nodes gr ...
- 71. Simplify Path压缩文件的绝对路径
[抄题]: Given an absolute path for a file (Unix-style), simplify it. For example,path = "/home/&q ...
- OpenCV学习记录(一):使用haar分类器进行人脸识别 标签: opencv脸部识别c++ 2017-07-03 15:59 26人阅读
OpenCV支持的目标检测的方法是利用样本的Haar特征进行的分类器训练,得到的级联boosted分类器(Cascade Classification).OpenCV2之后的C++接口除了Haar特征 ...
- 4.4.1 CAS详解
一.什么是CAS CAS,compare and swap的缩写,中文翻译成比较并交换. 我们都知道,在java语言之前,并发就已经广泛存在并在服务器领域得到了大量的应用.所以硬件厂商老早就在芯片中加 ...
- Codeigniter框架前后台部署(多目录部署)
个网站一般包含前台和后台并且访问的url是不同的,Codeigniter怎么来部署呢? 在网上看到了一篇比较好的文章: 在下载好的ci的根目录建立一个目录 admin 将application目录中的 ...
- javascript总结21:javascript-JSON与遍历
1 什么是JSON JavaScript Object Notation(JavaScript对象表示形式) JavaScript的子集 JSON和对象字面量的区别 JSON的属性必须用双引号引号引起 ...
- java中Integer常量池
我们先看一个关于Integer的例子 public static void main(String[] args) { // TeODO Auto-generated method stu Integ ...
- 云存储上传控件(cloud2)-Xproer.HttpUploader7
版权所有 2009-2016 荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/cloud2/ ...
- nodejs版本升级
网上都说 npm install –g n 可是一直不行,换做 npm install -g cnpm --registry=https://registry.npm.taobao.org ok
- github 上中国互联网公司的开源项目
github上 那个 watch和 follow功能 不太好用啊. 是我用的 不好,还是 怎么的.有时候 找不到 watch 和 follow. 秉持 开源 精神,省的大家 和 我 查找. 我只关注 ...