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 ...
随机推荐
- winfrom在图片上实现绘制
在控件加载入图片的基础上进行绘制内容 添加文字 首先就是要确定输入的文字,还有文字的样式. 文字的样式用到了FontDialog控件,获取文字呢,就放个textbox就可以了.如果在输入文字的显示展示 ...
- spring.net 继承
. <object id="parent" type="Bll.Parent, HRABLL" > <property name=" ...
- idea 删除代码的注释
搜索栏使用 正则表达式搜索 (/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*+/|[ \t]*//.*) 会搜索出来所有注释的代码 用空格replace替换掉就 ...
- css确定取消 悬浮底部样式 和 金额 后缀
.blockquote-bottom { width: 100%; position: fixed; margin: 0; bottom: 0; left: 0; text-align: center ...
- ubuntu 12.04安装vmtools 问题解决
vmware安装ubuntu12.04版本的vm tools时 遇到: Searching for a valid kernel header path... The path "& ...
- 编写高质量代码改善C#程序的157个建议——建议83：小心Parallel中的陷阱
建议83:小心Parallel中的陷阱 Parallel的For和ForEach方法还支持一些相对复杂的应用.在这些应用中,它允许我们在每个任务启动时执行一些初始化操作,在每个任务结束后,又执行一些后 ...
- 编写高质量代码改善C#程序的157个建议——建议78：应避免线程数量过多
建议78:应避免线程数量过多 在多数情况下,创建过多的线程意味着应用程序的架构设计可能存在着缺陷.经常有人会问,一个应用程序中到底含有多少线程才是合理的.现在我们找一台PC机,打开Windows的任务 ...
- sqlplus 简单的几个查询语句
sqlplus 是用来和oracle进行交互的工具,可以在电脑端使用,也可以在服务器使用 常用命令 show 显示SQL Plus中的信息 connect 先无条件断 ...
- Python之模块二
10>常用模块: 1>os模块: os.getcwd():获取当前工作目录,即当前python脚本工作的目录路径: os.chdir("dirname"):改变当前脚本 ...
- vs项目属性中的包含目录和库目录以及附加依赖项全都配置正确了，却还是提示：无法解析的外部符号
这种情况下,很大可能是lib文件有问题 我是用vs编译下载的源代码文件得到的lib出现了如题的情况, 后来去网站上直接下载了lib文件,竟然解决了!-.-