学习过CSS,那你知道BFC是什么吗?

osc_yo7hxxom 2020-11-11 11:51:33
面试


虽然可能你没听过BFC是什么,但是你一定用过,其是一种在CSS中存在的技术,你可能只是一直不知道有这样一个专业名词,本文就来介绍一下到底什么是BFC

  • 公众号:前端印象
  • 不定时有送书活动,记得关注~
  • 关注后回复对应文字领取:【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】

一、什么是BFC

首先引用一下WC3对BFC的专业解释

BFC(Block Formatting Context):翻译成中文叫做块级格式化上下文,它决定了元素如何对其内容进行定位,以及与其它元素的关系和相互作用,当涉及到可视化布局时,其提供了一个环境,元素在这个环境中按照一定的规则进行布局排列

换句话说,BFC就是为元素提供一个独立的容器,在该容器里按照一定的规则进行布局排列,该容器内的元素不会影响外部的元素,同理,外部的元素也不会影响内部的元素

二、如何触发BFC

先来了解一下有哪些条件可以触发BFC:

  1. float 不为 none
  2. positionabsolutefixed
  3. overflow 不为 visible
  4. displayinline-blocktableflow-root

后续的案例中,但凡遇到需要触发BFC的,都可以按照这四个条件来使用

三、BFC的相关案例

官方的解释非常的难以理解,那么我们就用几个例子来详细了解BFC的使用

(1)清除浮动

首先来看一个例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动</title>
<style>
.parent{

width: 350px;
background-color: red;
}
.child{

float: left;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1 child">1</div>
<div class="child2 child">2</div>
<div class="child3 child">3</div>
<div class="child4 child">4</div>
</div>
</body>
</html>

该html文档在浏览器中的样式如下图所示

在这里插入图片描述
很明显,这是一个子元素浮动无法撑开父元素的例子

产生这种情况的原因很简单,有以下两点:

  1. 父元素没有设置 height
  2. 子元素设置了 float 浮动,脱离了文档流

因子元素脱离了文档流,父元素无法统计到子元素的大小,因此子元素无法将父元素撑开,所以我们就要将浮动清除

那么我们平时是如何清除浮动的呢?最常见的可能就是给父元素添加样式 overflow: hidden 了,其实这种方法就触发了BFC,在父元素内部形成了一个独立的环境,按照BFC的布局规则,该容器内的元素都会被统计到,因此浮动就被清除了

清除浮动后的效果如下图所示

在这里插入图片描述
其实通过我们上述说到的触发BFC的条件都可以实现上述效果,这里就不做过多的展示了

既然讲到了清除浮动,我们就来看一下除了上述说到的方法,还会用到什么办法呢?

  1. 在最后一个子元素后面添加一个空元素,并给予样式 clear: both
  2. 给父元素设置一定的高度

(2)margin-top塌陷

另一个例子就是margin-top塌陷,如图

在这里插入图片描述
当前子元素在父元素框内,并且上面紧贴父元素上边缘,此时我们想让子元素的上边缘与父元素的上边缘拉开一段距离,实现如下图所示的效果

在这里插入图片描述
因此我们第一个想到的就是给子元素添加 margin-top,可结果却不如人意,效果如下图所示
在这里插入图片描述
实际效果就是,我们给子元素添加了 margin-top,但却是父元素整体与上一个元素拉开了距离,这就是我们常见的 margin-top塌陷 的问题


很明显,对子元素进行布局时影响到了其它元素的布局,因此我们可以通过给父元素添加一定的样式来触发BFC,使其内部形成一个独立的环境,这样就不会影响到其它元素的布局了

这里再做一个补充,针对 margin-top塌陷,我们还可以对父元素设置一个大小不为0的边框 border,这样也能解决问题

(3)垂直方向的margin重叠

先来看一段代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin重叠</title>
<style>
.parent{

width: 200px;
height: 500px;
background-color: red;
}
.child{

width: 100px;
height: 100px;
margin: 0 auto;
line-height: 100px;
text-align: center;
}
.child1{

margin-bottom: 20px;
background-color: lightblue;
}
.child2{

margin-top: 50px;
margin-bottom: 70px;
background-color: lightcoral;
}
.child3{

margin-top: 50px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="parent">
<div class="child child1">1</div>
<div class="child child2">2</div>
<div class="child child3">3</div>
</div>
</body>
</html>

效果如图所示

在这里插入图片描述
根据代码,按道理来说子元素1与子元素2之间应该相隔 20 + 50 = 70px,但实际却只有 50px ;同理,子元素2与子元素3之间应该相隔 70 + 50 = 120px,但实际却只有 70px

这是因为在垂直方向上,相邻两个元素若都设置了 margin 值,则按照较大的那个值来布局,这就是典型的垂直方向上的margin重叠问题

若此时为了避免margin重叠,我们可以给每一个子元素的外部添加一个父元素,并对父元素设置样式来触发BFC,那么就不会有上述的问题了

具体的代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin重叠</title>
<style>
.parent{

width: 200px;
height: 500px;
background-color: red;
}
.child{

width: 100px;
height: 100px;
margin: 0 auto;
line-height: 100px;
text-align: center;
}
.child1{

margin-bottom: 20px;
background-color: lightblue;
}
.child2{

margin-top: 50px;
margin-bottom: 70px;
background-color: lightcoral;
}
.child3{

margin-top: 50px;
background-color: lightgreen;
}
.third{

/*除了overflow: hidden,还可以写:
1. float: left
2. float: right
3. position: absolute
4. ……
*/
overflow: hidden;
}
</style>
</head>
<body>
<div class="parent">
<div class="third">
<div class="child child1">1</div>
</div>
<div class="third">
<div class="child child2">2</div>
</div>
<div class="third">
<div class="child child3">3</div>
</div>
</div>
</body>
</html>

效果如下图所示:

在这里插入图片描述
补充: 该案例中,我们通过给每个子元素套上了个父元素,并且都触发了BFC,从而实现了避免 margin 重叠,即我们创建了多个BFC才实现这样的效果。但是如果在一个BFC环境中,仍有多个子元素,那么这些子元素垂直方向的 margin 仍会出现重叠

(4)自适应布局

相比大家都有做过文字绕图这样的效果,其实现原理就非常的简单,只需一个 float 就可实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字绕图</title>
<style>
.parent{

border: 1px solid #000;
width: 200px;
height: 250px;
}
.img{

width: 100px;
height: 100px;
float: left;
}
.text{

background-color: lightgreen;
}
</style>
</head>
<body>
<div class="parent">
<img src="../../前端印象logo.jpg" alt="" class="img">
<div class="text">微信公众号:前端印象,每天分享前端技术、前端面经,还有更多福利可以领取,欢迎关注,私信我加群,群里有多位大佬,可以互相交流前端技术</div>
</div>
</body>
</html>

效果如下图所示

在这里插入图片描述

按道理来说,浮动的元素脱离了正常的文档流,应该会覆盖住别的元素的内容,但为什么这里实现了文字绕图的效果呢?

其实css最初设计浮动就是为了实现文字绕图的效果,虽然浮动会覆盖别的元素,但不会覆盖住文字

此时我们为了不让浮动的元素覆盖住别的元素,我们可以触发别的元素的BFC环境,因此可以给文本元素添加 overflow: hidden 样式,效果如下图所示

在这里插入图片描述
看到这里,不禁想起这几年非常流行的页面布局,那就是两栏布局,如下图所示

在这里插入图片描述
一般像这样的布局,都是左侧宽度固定了,右侧的宽度是自适应的

因此我们就可以通过刚才避免文字绕图的方式来实现这种布局

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自适应布局</title>
<style>
.parent{

height: 100vh;
}
.left{

width: 200px;
height: 100%;
background-color: lightgreen;
text-align: center;
float: left;
}
.right{

height: 100%;
overflow: hidden; /* 触发BFC,不被浮动元素所覆盖 */
text-align: center;
background-color: lightskyblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">固定宽度</div>
<div class="right">自适应宽度</div>
</div>
</body>
</html>

效果如图所示

在这里插入图片描述

四、结束语

官方对于BFC的讲解,我感觉是有点难以理解,因此我在本文中也没有将BFC环境中的布局规则列举出来,但其实BFC的布局规则大致可以理解为与正常的布局规则一样,只不过有些特殊的规则我在案例中也特地强调出来了,希望大家可以把每个案例好好看一看,这样应该能对BFC有个大致的了解了

你的【】 、【收藏】都是我创作的动力,谢谢大家的支持

版权声明
本文为[osc_yo7hxxom]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/4399154/blog/4712381

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple