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比较核心和重要的点.今天我们来深入学习一下 ...
随机推荐
- linux上查看系统内核版本命令(转载)
uname -a uname -r 查看发行版本信息: 在RedHat系统里,存在一个/etc/redhat-release文件,里面保存了发行版的版本信息 $cat /etc/redhat-rele ...
- 模式匹配之尺度空间---scale space
转载:http://www.cnblogs.com/cfantaisie/archive/2011/06/14/2080917.html 主要步骤 1).尺度空间的生成: 2).检测尺度 ...
- C# 调用类库里的事件
首先在类库中定义事件: //定义委托 public delegate void DelWeiTuo(string name); //定义事件 public event DelWeiTuo EventW ...
- 关于js开发的小问题
一.开发当中经常会动态拼接html,当然为了简便性好多人直接就是使用内联事件: $('#td1').html( '<a href="#" onclick="app. ...
- js 中常用的正则表达式
主要有以下几种: 匹配中文字符的正则表达式: [\u4e00-\u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了哦 获取日期正则表达式:\d{4}[年|\-|\.]\d{1,2}[ ...
- 区块链+AI将给区块链带来怎样的改变?
区块链和人工智能技术都是互联网时代最新.最热的技术,不仅可以改变我们生活,还能产生巨大的财富,为此国家大力支持发展,科技巨头们也纷纷布局.那区块链与人工智能结合,对区块链技术而言会产生什么样的化学反应 ...
- Gym - 101147E E. Jumping —— bfs
题目链接:http://codeforces.com/gym/101147/problem/E 题意:当人在第i个商店时,他可以向左或向右跳di段距离到达另一个商店(在范围之内),一个商店为一段距离. ...
- 通过dom4j写.xml文件
步骤: 1.左键选中src,点击红圈2: 2.新建类: 3.开始写代码: package com.bjsxt.xml; import java.io.File; import java.io.File ...
- ios 使用json
1.从https://github.com/stig/json-framework/中下载json框架:json-framework 2.解压下载的包,将class文件夹下的所有文件导入到当前工程下. ...
- 字符编码乱码问题(servlet底层 编码大揭秘)
好多初学者会遇到,请求过去的信息内包含中文(一般会是get方式提交过去的请求会出现).好郁闷,这是为什么呢.有下面分析下,说的不好可以吐槽 话说我们能遇到这种编码的问题,归根结底就是这 这 web开 ...