css之BFC(block formmatting context)[格式化上下文]
一、定义:
BFC就是一个黑盒子,可以保证盒子内部元素不管如何变化,都不会影响盒子附近的元素;它属于普通流、浮动、定位方案中的普通流。
二、触发条件:
1.body;
2.float(不包含none),position(不包含static);
3.display 为 inline-block、table-cells、flex
4.overflow(不包含visible)
三、BFC特性以及其应用:
1.同一个BFC盒子下面的2个元素的下外边距会发生折叠;
2.BFC元素可以包含浮动元素;
3.BFC可以阻止被浮动元素覆盖;(可以用这个实现2列自适应布局)
css之BFC(block formmatting context)[格式化上下文]的更多相关文章
- BFC --- Block Formatting Context --- 块级格式化上下文
虽然知道块级格式化上下文是什么东西,但要我把这个东西给说清楚,还真的不是一件容易的事儿,所以这篇文章我就要说说清楚到底什么使传说中的BFC,即块级格式化上下文. 一.BFC的通俗理解 通俗的理解 -- ...
- 对于BFC(block format context)理解
目录 前言 Box: CSS布局的基本单位&盒模型 什么是BFC?(Block formatting contexts) 元素与盒 正常流 块级与行内级 产生垂直外边距合并的必备条件 前言 什 ...
- BFC(块级格式化上下文)
渲染规则 1.内部的box会在垂直方向,一个接一个的放置 2.box垂直方向的距离由margin决定,属于同一个bfc的两个相邻box的margin会发生重叠 3.每个元素的margin box的左边 ...
- 基础总结(02)--BFC(块级格式化上下文)
BFC(块级格式化上下文)布局规则 1.元素垂直排列. 2.同一个BFC相邻两个元素的margin会重叠. 3.BFC区域不会与浮动元素重叠. 4.BFC就是页面上的一个隔离的独立容器,容器里面的子元 ...
- CSS BFC(Block Formatting Context)
BFC是 W3C CSS 2.1 规范中的一个概念Block Formatting Context的缩写即格式化上下文,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.简单讲,它是提 ...
- BFC (Block formatting context)
一:BFC 是什么 MDN解释: A block formatting context is a part of a visual CSS rendering of a Web page. ...
- BFC(块级 格式化上下文)的理解
本文转载(https://segmentfault.com/a/1190000013647777) 一.BFC的概念 1.规范解释 块格式化上下文(Block Formatting Context,B ...
- BFC 块级元素格式化上下文
Block Formatting Contexts: 块级元素格式化上下文块级元素如何对它的内容(子元素:也是一个块元素)进行布局,以及与其它元素(与内容同级别)的关系和相互作用 普通文档流的布局规则 ...
- 深入css布局篇(3)完结 — margin问题与格式化上下文
深入css布局(3) - margin问题与格式化上下文 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...
随机推荐
- git和github菜鸟使用步骤
刚刚在windows7下安装完git.奉上安装步骤. git安装 安装git程序.运行以下操作: 1. $ cd ~/.ssh //检查计算机ssh密钥 2.假设没有提示:No such fil ...
- iOS8需要兼容的内容
本文转载至 http://blog.csdn.net/liuwuguigui/article/details/39494435 1.iPad上使用presentModalViewController ...
- 【BZOJ2625】[Neerc2009]Inspection 最小流
[BZOJ2625][Neerc2009]Inspection Description You are in charge of a team that inspects a new ski reso ...
- EasyDarwin EasyCamera支持海康摄像机接入了
本文转自EasyDarwin开源团队成员Alex的博客:http://blog.csdn.net/cai6811376/article/details/52709816 EasyCamera默认使用海 ...
- Spring 实战 学习笔记(1)
Spring的核心 依赖注入 & 切面编程 1.创建应用组件之间协作的行为通常称为装配.(wiring) 2.Spring EL表达式.SEL是一种能在运行时构建复杂表达式,存取对象属性.对象 ...
- tornado安全应用之cookie
目前大多数服务器判断用户是否登录一般通过session机制,Tornado 通过 set_secure_cookie 和 get_secure_cookie 方法直接支持了这种功能.原理类似于sess ...
- h5的缓存机制
H5的缓存,大概有localstorage.sessionstorage.cookie和manifest. 一.LocalStorage LocalStorage是永久性的本地缓存,存储在客户端的浏览 ...
- spring类扫描注入-----类扫描的注解解析器
通过类扫描注入到容器中,这种方式,在实际开发中还是很常用的,可以看下自己的配置文件,就会发现,自己公司的项目,搞不好就是这么注入的. 起码,我发现我公司的项目就是这么干的. 下面来演示一下简单的例子: ...
- 信息发布员和频道管理员如何查看dedecms自定义表单内容
自定义表单的管理权限,超级管理员有,而频道管理员没有.在频道管理员的权限设置选项里,找不到自定义表单这一项.怎么办呢. 刚开始想修改权限设置选项,但觉得太麻烦.是否有偷懒取巧的办法? 在频道管理员的后 ...
- Java NIO(一) 初步理解NIO
Java NIO(New IO)是一个可以替代标准Java IO API的IO API(从Java 1.4开始),Java NIO提供了与标准IO不同的IO工作方式. 为什么要使用 NIO? NIO ...