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中的不管是是块级的还是内联的,都可以认为成块的,唯一的区别就是块的会独自占据一行 第二个文档流: 一个网页可以看作是 ...
随机推荐
- <面试经典题>输入框的功能测试点分析
(废话几句:这个是网上找来的一份模板,高亮部分为自己修改内容,且此面试题很像当年高考的“必考题”性质,触类旁通吧) 1. 输入框UI是否预计了输入内容长度(尽量完整的显示输入内容): 2. 输入框之前 ...
- 【转】Linux下创建、销毁、使用 SWAP
转自:http://blog.csdn.net/wxqee/article/details/7970110 创建swap文件方法 1) 创建一个足够大的文件 dd if=/dev/zero of=/l ...
- mac配置appium进行自动化测试
先去brew.sh这个网站,拷贝最新的下载安装命令,黏贴到终端里,回车,按提示下载安装. 安装完毕后,运行brewupdate 看看是否有更新,然后输入brew ios-webkit-debug-pr ...
- latex公式中的空格如何表示
两个quad空格 a \qquad b 两个m的宽度 quad空格 a \quad b 一个m的宽度 大空格 a\ b 1/3m宽度 中等空格 a\;b 2/7m宽度 小空格 a\,b 1/6m宽度 ...
- Linux系统下查看已经登录用户并踢出的方法
LINUX是个多用户系统,一旦连接到网络中,它可以同时为多个登录用户提供服务. 查看用户的操作 查看当前用户: [ROOT@LOCALHOST ROOT] # W ...
- MySql数据备份与恢复小结
方法1 备份 .sql" FROM 表名; 恢复 .sql" INTO TABLE 表名; 补充几个设置 1. FIELDS TERMINATED BY ',' #字段间隔符2. ...
- Hibernate学习笔记（三）Hibernate生成表单ID主键生成策略
一. Xml方式 <id>标签必须配置在<class>标签内第一个位置.由一个字段构成主键,如果是复杂主键<composite-id>标签 被映射的类必须定义对应数 ...
- 第一个Java Rest服务
package com.example; import javax.ws.rs.GET; import javax.ws.rs.PUT; import javax.ws.rs.Path; import ...
- Struct2提交表单数据到Acion
Struct2提交表单数据到Action,Action取表单的数据,传递变量.对象 HTML.jsp <form action="reg.do" method="p ...
- Codeforces Round #367 (Div. 2) A. Beru-taxi （水题）
Beru-taxi 题目链接: http://codeforces.com/contest/706/problem/A Description Vasiliy lives at point (a, b ...