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中的不管是是块级的还是内联的,都可以认为成块的,唯一的区别就是块的会独自占据一行 第二个文档流: 一个网页可以看作是 ...
随机推荐
- 彻底弄懂css中单位px和em的区别(转)
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em,那么两者有什么区别,又各自有什么优劣呢? 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了e ...
- create_project.py报错问题,建议用回python2.7
d:\DevTool\cocos2d-x-2.2.2\cocos2d-x-2.2.2\tools\project-creator\create_project.py 报错 d:\DevTool\coc ...
- VS2010 删除空行
查找内容:^:b*$\n 替换为: 查找范围:当前文档 使用:正则表达式 vs2013 ^\s*(?=\r?$)\n
- delphi请求idhttp数据
idhttp ss : TStringStream; begin ss := TStringStream.)); { 指定gb2312的中文代码页,或者54936(gb18030)更好些 utf8 对 ...
- Linux下的paste合并命令详解
paste单词意思是粘贴.该命令主要用来将多个文件的内容合并,与cut命令完成的功能刚好相反. 粘贴两个不同来源的数据时,首先需将其分类,并确保两个文件行数相同.paste将按行将不同文件行信息放在一 ...
- HD1013Digital Roots
Problem Description The digital root of a positive integer is found by summing the digits of the int ...
- SpriteParticle II
[SpriteParticle II] 1.Randomizing the Starting Position 2.Setting the Initial Angle 3.Setting a Part ...
- 山东意外险风险信息推送V7非车
<?xml version="1.0" encoding="GBK"?><Packet type="REQUEST" ve ...
- Java反射机制（创建Class对象的三种方式）
1:了解什么是反射机制? 在通常情况下,如果有一个类,可以通过类创建对象:但是反射就是要求通过一个对象找到一个类的名称: 2:在反射操作中,握住一个核心概念: 一切操作都将使用Object完成,类 ...
- [转载]关于AutoCAD.NET的辅助方法
转载自:http://www.cnblogs.com/milian/p/3315000.html 求中点坐标: /// <summary> /// 中点 /// </summary& ...