BFC 从了解到放弃
最近工作中我突然产生了一个想法,就如我们人类面临的终极问题一般,我从哪里来?我到哪里去?在撸代码进行CSS布局的时候,我会去想,我为什么这么做?,为什么浮动的元素要用overflow?,为什么要用clearfix?,为什么边距会重叠?为什么absolute就不需要clearfix,为什么...
作业部落地址:https://www.zybuluo.com/shenguotao/note/625449
目录:
什么是BFC?及其作用!
如何产生BFC?
BFC的应用
- 边距重叠
- 不与float box重叠
- 高度塌陷
总结
什么是BFC?及其作用!
BFC 即(Block Format Context)快级格式化范围,是 CSS2.1 中用于规定块级盒子的渲染布局方式,他在计算盒子高度,margin值等地方有区别于其他环境。
BFC 是一种概念,是对前端布局技术的一种理论上的总结,掌握它可以让我们在使用CSS +DIV进行布局时,知道一些特殊操作以及规避问题的原理。
形象的去理解我们可以将BFC看做成一个封闭的盒子,盒子以及盒子内的内容不受盒子外的其它盒子所影响,反之亦然。
BFC的主要作用有以下几点:
- 边距重叠
- 不与float box重叠
- 高度塌陷
如何产生BFC?##
为下情况都会让元素本身产生BFC环境:
· 根元素 (一个页面的Html标签应该是唯一的)
· display: inline-block | table-cell | table-caption | flex
· position: absolute | fixed
· overflow: hidden | auto | scroll
· float: left | right
BFC的应用
1. 边距重叠
边距重叠对于前端来说是一个很基础的概念了,这里我就简单说下其概念与解决方法,图啊代码什么的,就略了~
所谓边距重叠就是当两个元素垂直边距相互接触时,它们将合并形成一个边距,这个合并后的边距值就是这两个边距值中最大的哪一个。
产生边距重叠的情形无外乎以下两个方面:
- 垂直排列的两个同级元素
- 嵌套的父子元素
解决边距重叠的方法有很多,但是我认为这些方法最终还是归于两种:
防止边距接触
既然边距重叠是发生在边距相互接触的情形下,那么我们就可以针对问题的本质,防止两个元素的边距发生接触,比较常见的方法有:
· 添加1px高度的间隔元素
这种添加冗余标签的方式来解决垂直同级排列的边距重叠,最好还是不要采用。
· border-top:1px solid transparent
添加1px透明的上边框,来解决父子元素边距重叠。
· padding-top:1px
添加1px间距,来解决父子元素边距重叠。
利用BFC特性
其实,这个才是重点嘛,毕竟本篇文章说的是BFC相关的技能!
不产生边距重叠的效果本来就是BFC的特性之一,只是我们要根据使用场景进行选择。
利用BFC防止边距塌陷:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
width: 300px;
height: 300px;
background: #eee;
margin: 10px;
}
p {
width: 100px;
height: 100px;
background: #aaa;
margin: 20px;
}
.box1 {
overflow: hidden; /* 通过overflow方式形成BFC环境 */
}
.box2 {
display: table-cell; /* 通过display方式形成BFC环境 */
}
.box3 {
position: absolute; /* 通过position方式形成BFC环境 */
}
.box4 {
float: left; /* 通过float方式形成BFC环境 */
margin-top: 320px;
}
</style>
</head>
<body>
<div class="box1"><p>overflow</p></div>
<div class="box2"><p>display</p></div>
<div class="box3"><p>position</p></div>
<div class="box4"><p>float</p></div>
</body>
</html>
不过吧,看了这个DEMO连我自己也感觉通过建立BFC去解决边距重叠有些不太实际,一是有高射炮打蚊子的嫌疑,明明用padding就可以解决的非要去转换元素的类型,非要去overflow,二是通过BFC可能会影响页面的整体排版,毕竟float,absolute有太多的不可控性。
PS:个人认为垂直同级排列的元素边距实际上不需要去防止边距重叠,而且防止的话也很简单,给一个心目中满意的最大值即可。
2.不与float box重叠
我们知道浮动元素会脱离文档流,然后浮盖在文档流元素上,可以见示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.left{
float: left;
width:200px;
height:500px;
opacity:0.5;
background:#eee;
}
.right{
height:500px;
background:red;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
当一个元素浮动,另一个元素不浮动时,浮动元素因为脱离文档流就会盖在不浮动的元素上。
解决这个问题的方法也很简单,那就是为非浮动元素建立BFC环境,根据BFC的不不与float box重叠
的规则,我们可以得知下面DEMO中的情景。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.left{
float: left;
width:200px;
height:500px;
opacity:0.5;
background:#eee;
}
.right{
height:500px;
overflow:hidden;
background:red;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
这一特性,我认为还是很有用的,特别是应用在两栏布局上,对比我们常规为非浮动元素或非定位元素设置margin来挤开的方法,其优点在于不需要去知道浮动或定位元素的宽度。
3.高度塌陷
普通的文档流元素是无法包含浮动后的元素。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC</title>
<style>
.box{
border:1px solid #aaa;
}
p{
float: left;
width:50px;
height:50px;
background:#eee;
}
</style>
</head>
<body>
<div class="box">
<p></p>
</div>
</body>
</html>
但是一旦为元素建立BFC环境,那么这个元素就可以识别到浮动元素。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box{
display:inline-block;
*zoom:1;
border:1px solid green;
}
p{
float: left;
width:50px;
height:50px;
background:red;
}
</style>
</head>
<body>
<div class="box"><p></p></div>
</body>
</html>
浮动会导致脱离文档流,从而无法被计算到确切的高度,这种情况我们称之为高度塌陷。
解决高度塌陷的前提就是能识别并包含到浮动元素。而BFC就有这个特性,所以BFC也可以计算浮动元素的高度。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC</title>
<style>
.box{
border:1px solid #aaa;
overflow:hidden;
}
p{
float: left;
width:50px;
height:50px;
background:#eee;
}
</style>
</head>
<body>
<div class="box">
<p></p>
</div>
</body>
</html>
通过 overflow:hidden
将元素转换为BFC,固然可以解决高度塌陷的问题,但是大范围的应用在布局上是肯定是行不通的,毕竟overflow会造成溢出隐藏的问题,特别是与JS交互的效果时。
那有没有一个更好的高度检测方法呢?
答案是有的,就是我们经常用到的clearfix
。
.clearfix:after{
content:'';
display:table;
clear:both
}
.clearfix{
*zoom:1;/* IE6,7不支持BFC,所以需要通过专有的CSS属性,触发hasLayout。*/
}
但是我认为这种方式与BFC并没有直接的关系,chearfix的方法我个人的理解是,当一个普通流的元素因为其内部元素发生了浮动无法包含到内部元素,而导致高度塌陷时,可以在浮动元素的最下面加一个块级元素,并且该块级元素本身应用了清除浮动属性,又因为块级元素独占一行的本质,所以该元素会掉落在浮动元素的下面,从而间接导致了父元素能够重新获取高度。
总结
看了那么多关于BFC知识的介绍,我个人的感觉是并没有什么卵用啊...知道它,不知道它,我平日的工作该怎么做,还是这么做,代码该怎么撸还是这样撸,要说收获的话,就是对CSS 盒模型有了更深入一点的了解,以及利用BFC在两栏自适应布局上的新发现吧。
好了,洗洗睡去了,明天要上班了
BFC 从了解到放弃的更多相关文章
- 掘金 Android 文章精选合集
掘金 Android 文章精选合集 掘金官方 关注 2017.07.10 16:42* 字数 175276 阅读 50053评论 13喜欢 669 用两张图告诉你,为什么你的 App 会卡顿? - A ...
- “fixed+relative==absolute”——对BFC的再次思考
好久没写博客了,刚好今天跨年夜没约到什么妹子,在家宅着不如写点东西好了. 需求 昨天晚上,给公司年会做一个移动端的投票页面,遇到一个UI优化的问题: · 正文内容少于一屏时,投票提交按钮固定显示在页面 ...
- “fixed+relative≈≈absolute”——对BFC的再次思考
好久没写博客了,刚好今天跨年夜没约到什么妹子,在家宅着不如写点东西好了. 需求 昨天晚上,给公司年会做一个移动端的投票页面,遇到一个UI优化的问题: · 正文内容少于一屏时,投票提交按钮固定显示在页面 ...
- 深入理解BFC
定义 在解释BFC之前,先说一下文档流.我们常说的文档流其实分为定位流.浮动流和普通流三种.而普通流其实就是指BFC中的FC.FC是formatting context的首字母缩写,直译过来是格式化上 ...
- 关于CSS inline-block、BFC以及外边距合并的几个小问题
CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...
- CYQ.Data 从入门到放弃ORM系列:开篇:自动化框架编程思维
前言: 随着CYQ.Data 开始回归免费使用之后,发现用户的情绪越来越激动,为了保持这持续的激动性,让我有了开源的念头. 同时,由于框架经过这5-6年来的不断演进,以前发的早期教程已经太落后了,包括 ...
- 我对BFC的理解
最初这篇文章打算回答寒冬大神的第一问,谈谈CSS布局.本来呢我以为布局主要涉及float跟display相关属性,以及他们的包含框.静态位置等等.后来看了大神的一片面试文章,嗯?这里怎么还有个BFC, ...
- CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法
一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...
- 前端精选文摘:BFC 神奇背后的原理
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...
随机推荐
- Django admin 忘记密码
from django.contrib.auth.models import User user = User.objects.get(username="admin") user ...
- Linux QT数据库之登录注册
视频链接:https://www.bilibili.com/video/av11673511/ main.cpp #include <QSqlDatabase> #include < ...
- LocalDateTime与字符串互转/Date互转/LocalDate互转/指定日期/时间比较
Java 8中表示日期和时间的类有多个,主要的有: Instant:表示时刻,不直接对应年月日信息,需要通过时区转换 LocalDateTime: 表示与时区无关的日期和时间信息,不直接对应时刻,需要 ...
- 2. Jmeter压力测试简单教程(包括服务器状态监控) (转)
转自:https://blog.csdn.net/cbzcbzcbzcbz/article/details/78023327 前段时间公司需要对服务器进行压力测试,包括登录前的页面和登录后的页面,主要 ...
- bzoj千题计划129:bzoj2007: [Noi2010]海拔
http://www.lydsy.com/JudgeOnline/problem.php?id=2007 1.所有点的高度一定在0~1之间, 如果有一个点的高度超过了1,那么必定会有人先上坡,再下坡, ...
- zz 启动Matlab提示Microsoft Visual C++ 2005 Redistributable存在问题问题
帮助领导搞Matlab 2010a 绿色版; 领导把绿色版的文件夹挪了一下位置 (领导就是领导,做什么都按照自己的想当然的想法做) 然后, 脆弱的绿色版Matlab 2010a Portable就罢工 ...
- nodejs出现events.js:72中抛出错误 Error: listen EADDRINUSE
<pre>events.js:72 throw er; // Unhandled 'error' event ^ Error: listen EADDRINUSE at errnoExce ...
- bzoj 5055: 膜法师——树状数组
Description 在经历过1e9次大型战争后的宇宙中现在还剩下n个完美维度, 现在来自多元宇宙的膜法师,想偷取其中的三个维度为伟大的长者续秒, 显然,他能为长者所续的时间,为这三个维度上能量的乘 ...
- R的农场 chebnear
评测传送门 Description最近,R 终于获得了一片他梦寐以求的农场,但如此大的一片农场,想要做好防卫工作可不是一件容易的事.所以 R 购买了 N 个守卫,分别让他们站在一定的位置上(守卫不可移 ...
- Vue学习看这篇就够
Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的 ...