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比较核心和重要的点.今天我们来深入学习一下 ...
随机推荐
- 在字符串资源文件里加入HTML元素,直接使用字符串资源,HTML元素没起作用的解决的方法
escape html in string resource 一. 需求描写叙述 给TextView赋值res资源库中的字符串资源,注意这里是一个string资源,要实现以下的效果 "未 ...
- javascript 获取当前日期 月份 时间
<script type="text/javascript"> function getDate() { var date = new Date(); //得到当前日期 ...
- Aspose.cells 读取Excel表中的图片问题
一.说明 本文主要是讲解,怎么使用aspose.cells读取Excel表中的图片,并把图片转换成流或是image对象. 二.开发环境说明 开发工具vs2012,c#语言, 三.Aspose.cell ...
- [Usaco2005 Dec]Cleaning Shifts 清理牛棚
题目描述 Farmer John's cows, pampered since birth, have reached new heights of fastidiousness. They now ...
- tornado之异步web服务二
前面介绍了异步方法带来的显著性能提升.我们来看下异步使用的方法. 1 首先对于get方法使用tornado.web.asynchronous进行装饰.当使用tornado.web.asynchrono ...
- Android Button Maker(在线生成android shape xml文件的工具),真方便!
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/scry5566/article/details/25379275 直接上地址:http ...
- ps 工具栏使用
1:称动工具,快捷键是v,则选中移动工具:按shift和左键,可移动当前层移到另一层的中间对齐.如果不用sfhift键,则只是移动:alt+左键上移动,则复制层:alt+中间滚轮,则为放大和缩小. 2 ...
- HDU1873 看病要排队 —— 优先队列(STL)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1873 题解: 题目已经说出了解题方法:优先队列.但是之前没有学过优先队列,而且这题还是在现场赛做的.由 ...
- gzhu 2013 Good Sequence 解题报告
题目链接:(这个是内网的网址) http://172.22.27.1/problem?pid=1013 Good Sequence Time Limit: 4000/2000 MS (Java/Ot ...
- BZOJ4936:match (不错的分治)
给你一个由小写字母组成的字符串s,要你构造一个字典序最小的(认为左括号的字典序比右括号小)合法的括号 序列与这个字符串匹配,字符串和括号序列匹配定义为:首先长度必须相等,其次对于一对匹配的左括号和右括 ...