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让浮动元素也参与计算
<style>
*{padding: 0;margin: 0;}
.par{
border: 5px solid #fcc;
width: 300px;
/*这里的overflow并不是为了超出则隐藏，而是为了创建一个BFC*/
/* overflow: hidden; */
display: inline-block;
}
.child{
border: 5px solid #f66;
width: 100px;
height: 100px;
float: left;
/* clear: both; */
}
</style>
</head>
<body>
<!-- 网页的定位（大） 文档流正常，浮动，定位，flex，table -->
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>- 三、每个元素的左边，要与包含盒子的左边相接触
- 四、BFC的区域不会与float box重叠
<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>/*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。
.clearfix:after{
content:'';
display:table;
clear:both
}
.clearfix{
*zoom:1;/* IE6,7不支持BFC，所以需要通过专有的CSS属性，触发hasLayout。*/
}BFC理解的更多相关文章
- 关于css盒子模型和BFC的理解
CSS盒子模型 包含元素内容(content).内边距(padding).边框(border).外边距(margin) 一般元素总宽度 = element的width+padding的左右边距+mar ...
- 10 分钟理解 BFC 原理
一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照其在 HTML 中的先后位置至 ...
- 10分钟理解BFC原理
10 分钟理解 BFC 原理 一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照 ...
- 前端笔记之CSS（下）浮动&BFC&定位&Hack
一.浮动 1.1 各个语言的主要知识点 HTML:标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS: 样式: 布局: 标准流(标准文档流.普通文档流):盒子模型(width/heigh ...
- BFC是个什么概念？
在布局中一般就三种定位方式:普通流.浮动.绝对定位. BFC,译过来叫作“块级格式化上下文”,听起来贼高大上,它属于普通流的一种.通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无 ...
- BFC(块级格式化上下文)
转载自:https://www.cnblogs.com/asheng2016/p/7281784.html https://blog.csdn.net/jiaojsun/article/details ...
- 什么是BFC？
转载自知乎:https://zhuanlan.zhihu.com/p/25321647 一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: ...
- 10分钟了解什么是BFC
BFC对于已经是一个耳熟能详的词汇了,而且在前端面试中,这题也是一个高频题.虽然我们平时在开发的时候知道如何利用BFC来解决问题,但是我们要具体说出BFC的概念和怎么触发BFC,我相信很多小伙伴也是和 ...
- 浅析CSS里的 BFC 和 IFC
前端日刊 登录 浅析CSS里的 BFC 和 IFC 2018-01-29 阅读 1794 收藏 3 原链:segmentfault.com 分享到: 前端必备图书<Web安全开发指南 掌握白 ...
随机推荐
- AcWing 288. 休息时间
传送门 思路: 考虑DP,设dp[i][j][1]为牛在前小时休息j个小时且第i个小时休息时,回复的最多体力:dp[i][j][0]为牛在前小时休息j个小时且第i个小时没有休息时,回复的最多体力. 可 ...
- Qt：QListWidget
0.说明 QListWidget指明一个基于Item的List Widget. 构造 QListWidget与QListView类似,都可以显示一列Item,区别在于前者可以往其中增删Item. QL ...
- （二）目标检测算法之R-CNN
系列博客链接: (一)目标检测概述 https://www.cnblogs.com/kongweisi/p/10894415.html 概述: 1.目标检测-Overfeat模型 2.目标检测-R-C ...
- JAVA——选择，循环，顺序控制结构
目录 一.顺序控制 二.选择控制 2.1分支控制 2.1.1单分支 2.1.2双分支 2.1.3分支控制if-else 2.1.4嵌套分支 2.2switch分支结构 细节讨论 练习 题目1 题目2 ...
- LeetCode-078-子集
子集 题目描述:给你一个整数数组 nums ,数组中的元素 互不相同 .返回该数组所有可能的子集(幂集). 解集 不能 包含重复的子集.你可以按 任意顺序 返回解集. 示例说明请见LeetCode官网 ...
- Thread线程基本写法用法
//线程属性 protected Thread workerThread; protected bool isWorkerThreadStopped = true; public void Initi ...
- 为什么不让用join？《死磕MySQL系列 十六》
大家好,我是咔咔 不期速成,日拱一卒 在平时开发工作中join的使用频率是非常高的,很多SQL优化博文也让把子查询改为join从而提升性能,但部分公司的DBA又不让用,那么使用join到底有什么问题呢 ...
- （转载）字符编码那点事：快速理解ASCII、Unicode、GBK和UTF-8
- LGP4714题解
没意思啊 题意:求 \(1^{k+2}(n)\),其中规定 \(1^k\) 在 \(k=1\) 时为 \(1\),在 \(2 \leq k\) 时为 \(1 * 1^{k-1}\)(* 为狄利克雷卷积 ...
- npm vue路由配置
npm vue路由 复习:1.README.md文件:保存如何使用的命令 (1) npm install:拷项目时可以不拷node_modules文件,运行该命令时,会自动下载node_mod ...