BFC 浅谈
写在前面
Block formatting context （块级格式化上下文）
页面文档由块block构成 每个block在页面上占据自己的位置
使用新的元素构建BFC overflow：hidden | auto | scroll； 只要不为visible新的空间
告诉浏览器，外面的环境影响不到我了 我重新来进行Block formatting 布局和定位
核心：
新的BFC，给出了新的不受外界影响的块级格式化环境
block 块级-> 页面的基础
formatting context 格式化-> 渲染
浏览器构建文档树的时候 布局和定位元素
网页的定位（大） 文档流正常，浮动，定位，flex，table
广义的定位 块级元素的定位 垂直的定位；行内元素 左右定位 通过内容来确定
狭义的定位：
float 浮动元素，在一行的开始或者结束
flex 弹性布局
position
BFC 在正常的文档流里面重建一个新的上下文环境
BFC的约束规则
一、在浏览器进行页面元素布局的时候 同一个BFC的两个相邻的Box的margin 会重叠，与方向无关
破坏规则 创建新的BFC Context上下文的概念
如何创建BFC？=>重新规划一个（独立）渲染区域
- 根元素body，天然是一个BFC
- overflow:hidden;
- float 不为none
- display:inline-block | table-cell |table-caption
- position:absolute | fixed 只要不为static
好像只剩块级元素和行内元素不是BFC
二、
BFC的高度，浮动元素也要参与计算在元素
float之后脱离了文档流没有办法计算确切高度，这种情况我们称之为高度塌陷。解决高度塌陷的前提就是能识别并包含到浮动元素。而BFC就有这个特性，所以BFC也可以计算浮动元素的高度。新建BFC让浮动元素也参与计算1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104<style>
*{padding: 0;margin: 0;}
.par{
border: 5px solid #fcc;
width: 300px; /* overflow: hidden; */
display: inline-block;
}
.child{
border: 5px solid #f66;
width: 100px;
height: 100px;
float: left;
/* clear: both; */
}
</style>
</head>
<body>
<!-- 网页的定位（大） 文档流正常，浮动，定位，flex，table -->
大专栏 BFC 浅谈ss="tag"><div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
```
- 三、每个元素的左边，要与包含盒子的左边相接触
- 四、BFC的区域不会与float box重叠
```html
<style>
*{padding: 0;margin: 0;}
.aside{
float: left;
width: 100px;
height: 150px;
background-color: #ff6666;
}
.main{
height: 200px;
background: #ffcccc;
/* clear: left; */
overflow: hidden;
}
</style>
</head>
<body>
<!-- 自适应两栏式布局 类似于flex：1；
aside 和 main 处于同一BFC（body）下
BFC布局规则3 规则4 -->
<div class="aside"></div>
<div class="main"></div>
</body>
```
```html
/*BFC在三栏式布局中的应用*/
<style>
*{padding: 0;margin: 0;}
.container{
height: 200px;
}
.left,.right,.center{
height: 200px;
}
.left{
background: pink;
float: left;
width: 180px;
}
.right{
background: lightblue;
width: 180px;
float: right;
}
.center{
background: yellow;
overflow: hidden;
}
</style>
</head>
<body>
<!-- 三栏式布局 -->
<div class="container">
<!-- 页面的结构与呈现效果不一致？想一下 -->
<div class="left">Left</div>
<div class="right">Right</div>
<div class="center">Center</div>
</div>
</body>
``` **注意：**
> 通过 overflow:hidden将元素转换为BFC，固然可以解决高度塌陷的问题，但是大范围的应用在布局上是肯定是行不通的，毕竟overflow会造成溢出隐藏的问题，特别是与JS交互的效果时。 那有没有一个更好的高度检测方法呢？
答案是有的，就是我们经常用到的clearfix。
```css
.clearfix:after{
content:'';
display:table;
clear:both
}
.clearfix{
*zoom:1;/* IE6,7不支持BFC，所以需要通过专有的CSS属性，触发hasLayout。*/
}
BFC 浅谈的更多相关文章
- 【css】浅谈BFC
定义: 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. BFC的布 ...
- 浅谈 Fragment 生命周期
版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...
- 浅谈 LayoutInflater
浅谈 LayoutInflater 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/View 文中如有纰漏,欢迎大家留言指出. 在 Android 的 ...
- 浅谈Java的throw与throws
转载:http://blog.csdn.net/luoweifu/article/details/10721543 我进行了一些加工,不是本人原创但比原博主要更完善~ 浅谈Java异常 以前虽然知道一 ...
- 浅谈SQL注入风险 - 一个Login拿下Server
前两天,带着学生们学习了简单的ASP.NET MVC,通过ADO.NET方式连接数据库,实现增删改查. 可能有一部分学生提前预习过,在我写登录SQL的时候,他们鄙视我说:“老师你这SQL有注入,随便都 ...
- 浅谈WebService的版本兼容性设计
在现在大型的项目或者软件开发中,一般都会有很多种终端, PC端比如Winform.WebForm,移动端,比如各种Native客户端(iOS, Android, WP),Html5等,我们要满足以上所 ...
- 浅谈angular2+ionic2
浅谈angular2+ionic2 前言: 不要用angular的语法去写angular2,有人说二者就像Java和JavaScript的区别. 1. 项目所用:angular2+ionic2 ...
- iOS开发之浅谈MVVM的架构设计与团队协作
今天写这篇博客是想达到抛砖引玉的作用,想与大家交流一下思想,相互学习,博文中有不足之处还望大家批评指正.本篇博客的内容沿袭以往博客的风格,也是以干货为主,偶尔扯扯咸蛋(哈哈~不好好工作又开始发表博客啦 ...
- Linux特殊符号浅谈
Linux特殊字符浅谈 我们经常跟键盘上面那些特殊符号比如(?.!.~...)打交道,其实在Linux有其独特的含义,大致可以分为三类:Linux特殊符号.通配符.正则表达式. Linux特殊符号又可 ...
随机推荐
- XSL使用写法与效果
data.xml <?xml-stylesheet type="text/xsl" href="getdata.xsl"?> <ROOT> ...
- screen 用法
登陆Linux服务器跑程序, 担心ssh连接被中断后,导致跑了一半的任务被强制终止. 一个比较好的办法是使用 screen 命令, 下面是使用说明 类型 命令 备注 创建 screen 查看 scre ...
- 黑马eesy_15 Vue：03.生命周期与ajax异步请求
黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) vue的生命周期与ajax异步请求 1.Vue的 ...
- selenium自学进度-2014.12.3
今天把小米系列的视频看到了倒数第二课 他讲得很好,只是我现在是看第一遍,回头还需要照着视频多练练. 成长的道路问题艰辛的,学习的道路问题孤独的,希望自己能够坚持下去. 不要让今天的努力白费,不能让未来 ...
- android viewgrop(实现了事件监听/手动滑动)
package com.example.myviewgroup; import android.content.Context;import android.os.Handler;import and ...
- Python图形验证码识别
一,OCR OCR,即Optical Character Recognition,光学字符识别,通过扫描字符,分析形状,然后将其翻译成电子文本的过程.tesserocr是Python的一个OCR识别库 ...
- Monkey安装与配置教程
一.JAVA环境的搭建 安装jdk1.8.0_221,完成环境变量的配置 然后再在系统变量中找到Path,添加%JAVA_HOME%\bin;,确定后,按win+r打开运行,输入cmd 在cmd窗口中 ...
- [单调队列]XKC's basketball team
XKC's basketball team 题意:给定一个序列,从每一个数后面比它大至少 \(m\) 的数中求出与它之间最大的距离.如果没有则为 \(-1\). 题解:从后向前维护一个递增的队列,从后 ...
- spring自带的定时任务功能，基于注解和xml配置
1.spring的配置文件 <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi=&quo ...
- class.forName() 和 classLoader 的区别
相同点: java中class.forName() 和 classLoader 都可用来对类进行加载 不同店: 1.class.forName()除了将类的 .class ...