CSS定位规则之BFC 你居然一直不知道的东西！！！！！
相关文档：
http://blog.sina.com.cn/s/blog_877284510101jo5d.html
http://www.cnblogs.com/dojo-lzz/p/3999013.html
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
BFC（Block
Formatting CoFSADntext）直译为“块级格式化范围”
1.是 W3C CSS 2.1 规范中的一个概念，它决定了元素怎样对其内容进行定位。以及与其他元素的关系和相互作用。
当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中依照一定规则进行布局。一个环境中的元素不会影响到其他环境中的布局。比方浮动元素会形成BFC。浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。
这里有点类似一个BFC就是一个独立的行政单位的意思。
也能够说BFC就是一个作用范围。能够把它理解成是一个独立的容器，而且这个容器的里box的布局，与这个容器外的毫不相干。
2.还有一个通俗点的解释是：在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) 。类型能够是 block ，或者是 inline 。但不能同一时候属于这两者。
而且， Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化，
Inline boxes(块内框) 则在 inline formatting context(行内格式化上下文) 里格式化。不论什么被渲染的元素都属于一个 box 。而且不是 block 。就是 inline 。即使是未被不论什么元素包裹的文本，依据不同的情况，也会属于匿名的 block boxes 或者 inline boxes。
所以上面的描写叙述，即是把全部的元素划分到相应的 formatting context 里。
DEMO1:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
body {
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: right;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
}
</style>
</head>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
body {
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: right;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
overflow: hidden;
}
</style>
</head>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
</html>
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb21vZ2c=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
.par {
border: 5px solid #fcc;
width: 300px;
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
.par {
border: 5px solid #fcc;
width: 300px;
overflow: hidden;;
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb21vZ2c=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title></title>
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
.left{
background:pink;
float: left;
width:180px;
height:200px;
}
.center{
background:lightyellow;
overflow:hidden;
height:200px;
}
.right{
background: lightblue;
width:180px;
height:200px;
float:right;
}
</style>
</head>
<body>
<div class="container">
<div class="right">right</div>
<div class="left">left</div>
<div class="center">center</div>
</div>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title></title>
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
.main{border:2px blue solid;}
.left{
background:pink;
float: left;
width:180px;
height:200px;
}
</style>
</head>
<body>
<div class="main">
<div class="c">
<div class="left">right</div>
<div class="left">left</div>
</div>
<div class="c">
<div class="left">right</div>
<div class="left">left</div>
</div>
</div>
</html>
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb21vZ2c=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title></title>
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
.main{border:2px blue solid;}
.c{overflow: hidden;;}
.left{
background:pink;
float: left;
width:180px;
height:200px;
}
</style>
</head>
<body>
<div class="main">
<div class="c">
<div class="left">right</div>
<div class="left">left</div>
</div>
<div class="c">
<div class="left">right</div>
<div class="left">left</div>
</div>
</div>
</html>
CSS定位规则之BFC 你居然一直不知道的东西！！！！！的更多相关文章
- CSS定位与布局：普通流
CSS定位与布局属于CSS的基础,也是CSS布局影响很大的一部分,具体主要包括三种定位与布局机制( Positioning schemes):普通流,浮动,绝对定位. 其实除了这三种之外,还有一些定位 ...
- 认识和理解css布局中的BFC
认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Con ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- css Block formatting context BFC
w3c关于BFC解释: http://www.w3.org/TR/CSS21/visuren.html#block-formatting Mdn描述: A block formatting conte ...
- CSS定位与布局：浮动
浮动的特点 浮动(float)属性提出的作用是实现文字的环绕效果,一个元素浮动后,会脱离普通流.主要的特点如下: 浮动的元素会向左或者向右移动直到它的外边缘接触容器框(containing blo ...
- html5--6-33 CSS定位是什么
html5--6-33 CSS定位是什么 一.总结 一句话总结: 1.常规文档流是一套体系,浮动是另外一套体系. 2.标签清除浮动之后会跑到常规文档流它本来的地方. 3.浮动是否占据常规文档流:应该不 ...
- CSS定位的属性值
关于CSS定位都是老生常谈的问题了,不过有一个问题,最新的属性值在某些网站上并没有被更新到教程上 下面我记录一下 position现在有五个属性值 1.static:静态定位,没有特殊的定位规则,遵循 ...
- 十分钟复习CSS盒模型与BFC
css盒模型与BFC 本文为收集整理总结网上资源 旨在系统复习css盒模型与bfc 节省复习时间 阅读10分钟 什么是盒模型 每一个文档中,每个元素都被表示为一个矩形的盒子,它都会具有内容区.padd ...
- 有关CSS 定位中的盒装模型、position、z-index的学习心得
开始整体之前我需要说明两个概念: 第一个就是 一切皆为框 也就是说在HTML中的不管是是块级的还是内联的,都可以认为成块的,唯一的区别就是块的会独自占据一行 第二个文档流: 一个网页可以看作是 ...
随机推荐
- 如何使用Fiddler调试线上JS代码
大家平时肯定都用过火狐的Firebug或者谷歌的调试工具来调试JS,但遗憾的是我们不能像编辑html,css那样来直接新增或者删除JS代码. 虽然可以通过调试工具的控制台来动态执行JS代码,但有时候却 ...
- javascript针对DOM的应用
所谓针对DOM的应用.也就我这里只教大家用javascript操作页面中dom元素做交互.我相信可能大部分人来这里学javascript主要还是想用这个结合页面中的DOM元素做一些实际有用的交互效果. ...
- 精品手游《里奥的财富》高清版逆向移植家用机与PC平台（转）
冒险动作游戏<里奥的财富>于去年10月登陆移动平台,曾荣获App Store“年度优秀游戏”.开发商宣布将推出其HD版本,近期会陆续登陆PS4.PC.MAC.Xbox One平台. 由瑞典 ...
- 备份数据库SQL Server 2008下实测
下面的存储过程适用: 1.一次想备份多个数据库. 2.只需要一步操作,在有存储过程的条件下. 3.可以根据自己的需要修改存储过程. /*----------------------------- De ...
- CodeIgniter 3.0+ 部署linux环境 session报错
codeigniter Message: mkdir(): Invalid path Filename: drivers/Session_files_driver.php 看起来像权限问题,在默认情况 ...
- Yii 1 数据库操作 笔记
$result = array( 'id'=>null, 'val'=>0 ); $row1 = Yii::app()->db->createCommand()->ins ...
- 僵尸进程&孤儿进程
http://www.cnblogs.com/Anker/p/3271773.html
- hadoop 异常及处理总结-01(小马哥-原创)
试验环境: 本地:MyEclipse 集群:Vmware 11+ 6台 Centos 6.5 Hadoop版本: 2.4.0(配置为自动HA) 试验背景: 在正常测试MapReduce(下简称MR)程 ...
- openstack network
- 关于MAC下的QQ聊天中看不到对方所发的图片解决
使用QQ聊天我们会经常碰到一件让人烦心的事情,那就是别人发的截图自己看不大,是一张裂图(腾讯默认的那张图片).通常有几种情况可以造成这种结果: 第一种原因,网络延迟原因,你的网络不好或者对方的网络不好 ...