当前位置: 首页 > news >正文

BFC的含义以及应用

什么是BFC?

BFC全称是Block Formatting context,翻译过来就是块级格式化上下文。简单来说,BFC是一个==完全独立==的空间。让空间里的子元素不会影响到外面的布局。😃😃😃

如何触发BFC呢?

mdn给了如下方式:😃

Introduction to formatting contexts 格式化上下文简介 - CSS:层叠样式表 | MDN (mozilla.org)

html 元素不是唯一能够创建块格式上下文的元素。任何块级元素都可以通过应用某些 CSS 属性来创建一个 BFC

除了文档的根元素html之外,还将在以下情况下创建一个新的 BFC:

  • 使用float 使其浮动的元素
  • 绝对定位的元素 (包含 position: fixedposition: sticky
  • 使用以下属性的元素 display: inline-block
  • 表格单元格或使用 display: table-cell, 包括使用 display: table-* 属性的所有表格单元格
  • 表格标题或使用 display: table-caption 的元素
  • 块级元素的 overflow 属性不为 visible
  • 元素属性为 display: flow-rootdisplay: flow-root list-item
  • 元素属性为 contain: layout, content, 或 strict
  • flex items
  • 网格布局元素
  • multicol containers
  • 元素属性 column-span 设置为 all

BFC的规则😃

  • BFC也就是块级元素,会在竖直方向上依次排列。
  • BFC就是页面上一个独立的容器,容器的标签不会影响到外面布局
  • 垂直方向的距离会重叠,属于同一个BFC的两个外标签会发生重叠。
  • 计算BFC的高度,浮动元素也参与计算。

使用BFC解决几个常见的问题

高度塌陷问题

我们在使用的过程中,常常会碰到这样的问题,将子元素浮动起来,父元素的高度并没有被撑开。例如

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.outer{background-color: black;}.box1{width: 100px;height: 300px;float: left;background-color: skyblue;}.box2{width: 100px;height: 300px;float: left;margin-left: 10px;background-color: palegreen;}</style>
</head>
<body><div class="outer"><div class="box1"></div><div class="box2"></div></div>
</body>
</html>

在这里插入图片描述

可以看见,因为背景色没有黑色,所以并没有被撑开。

修改代码后

 .outer{background-color: black;overflow: hidden;}

在这里插入图片描述

此时,浮动中的高度塌陷就被解决了。

外边距合并问题(只处理嵌套模块合并问题)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box1 {width: 300px;height: 200px;background-color: pink;margin-top: 10px;}.box2 {width: 200px;height: 100px;background-color: blue;margin-top: 20px;}</style>
</head><body><div class="box1"><div class="box2"></div></div></body></html>

在这里插入图片描述

修改代码后

    .box1 {width: 300px;height: 200px;background-color: pink;overflow: hidden;margin-top: 10px;}

在这里插入图片描述

双栏布局问题

引发这个问题的原因==主要是浮动的特性。==

浮动和绝对定位一样,都会脱离文档流,但是浮动与绝对定位不一样的是浮动脱离文档流后,其余的盒子的文字显示会避开浮动元素,绝对定位就相当于飘到天上去了。但是浮动算是半票。对此,双栏布局也有这个问题。文字被浮动元素挤下去了。例如

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}div{width: 300px;}.left{width: 200px;float: left;background-color: salmon;}.right{width: 300px;background-color: lightblue;}</style>
</head><body><div class="outer"><div class="left">的撒昆德拉是科幻大师dasdasdsad大号三菱电机嘎斯了解更多就撒开顶顶顶顶德鲁克</div><div class="right">的撒昆德拉是科幻大师dasdasdsad大号三菱电机嘎斯了解更多就撒开顶顶顶顶德鲁克的撒昆德拉是科幻大师dasdasdsad大号三菱电机嘎斯了解更多就撒开顶顶顶顶德鲁克</div></div>
</body></html>

在这里插入图片描述

呈现出来的是这种效果,显然这种效果是不好的。对此,解决办法就是BFC.

修改代码

   .right{width: 300px;background-color: lightblue;overflow: hidden;}

在这里插入图片描述

对此,BFC讲解到这里。如果有更深的理解,可以在下方提提想法!!😃😃😃

http://www.lryc.cn/news/20750.html

相关文章:

  • 电脑技巧:分享8个Win11系统必备小技巧
  • C/C++每日一练(20230226)
  • Vue 3第二章:Vite文件目录结构及SFC语法
  • Leetcode 剑指 Offer II 016. 不含重复字符的最长子字符串
  • TCP 的演化史-sack 与 reordering metric
  • 【Spring6】| Spring的入门程序、集成Log4j2日志框架
  • 包子凑数(完全背包)
  • Spring超级全家桶,学完绝对是惊艳面试官的程度
  • Redis主要数据类型
  • 【Linux | ELK 8.2】搭建ELKB集群Ⅰ—— 实验环境说明和搭建Elasticsearch集群
  • 不同情况下*p和*p的区别(指针)
  • Vuex基础语法
  • 刚上岸字节测试开发岗,全网最真实的大厂面试真题
  • Mac监控键盘输入并执行动作
  • Transformer输出张量的值全部相同?!
  • 港科夜闻|全国政协副主席梁振英先生率香港媒体高管团到访香港科大(广州)...
  • XML调用 CAPL Test Function
  • Linux网络配置(NAT)
  • 数据结构——第二章 线性表(8)——线性表总结
  • 3.7寸按键翻页工牌
  • 西北工业大学大学物理(II)选填解析2019-2020期末
  • [计算机网络(第八版)]第一章 概述(章节测试/章节作业)
  • 华为OD机试真题大全,用 Python 解华为机试题 | 机试宝典
  • 电子科技大学数据库与软件工程三
  • 华为开源自研AI框架昇思MindSpore数据变换:Transforms
  • 软件测试之边界值测试法
  • 【华为OD机试模拟题】用 C++ 实现 - 最近的点(2023.Q1)
  • Qt windeployqt.exe 打包qml
  • 【人脸识别】CurricularFace:自适应课程学习人脸识别损失函数
  • springmvc之rest风格(RESTFUL)