- 2024-09-05什么是BFC
定义BFC(Blockformattingcontext)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-levelbox参与，它规定了内部的Block-levelBox如何布局，并且与这个区域外部毫不相干。布局规则1、内部的Box会在垂直方向，一个接一个地放置2、Box垂直方向的距离由margin
- 2024-07-22iframe、BFC
iframeiframe标签用来制作后台管理系统，不需要新开浏览器窗口就可以在本页面规定区域切换页面。iframe标签src属性是首次展示的页面添加name属性用来绑定跳转连接a连接负责跳转页面，属性targate就是iframe的name属性浏览器回默认给iframe一点多余的尺寸需要自己调BFC什
- 2024-07-19浮动 清除浮动的影响
标准流：元素按照本身的特性进行排列布局浮动：元素脱离标准流，布局到左右位置浮动属性值描述left元素向左浮动right元素向右浮动none元素不浮动（默认值）浮动后元素的特点：1、浮动后的元素会怕漂浮在其他元素之上2、浮动后的元素不占原来的位置3、浮动后的两个
- 2024-07-12前端——BFC
一、什么是BFC？1.BFC是BlockFormattingContext(块级格式上下文)，可以理解成元素的一个“特异功能”。2.该"特异功能"，在默认的情况下处于关闭状态;当元素满足了某些条件后，该“特异功能”被激活。3.所谓激活“特异功能”，专业点说就是:该元素创建了BFC(又称:开启了BFC)。
- 2024-07-08【软件工程造价师必修课：概念篇】4.ILF/EIF/EI/EO/EQ/BFC五大功能点说的明明白白！附案例解析
软件成本评估工作，本身有一定的专业性，也是有一定的门槛，最主要的难点在功能点识别方面。 下面我们就针对评估过程中需要掌握的功能点知识，分享给大家，大家先了解概念，继而通过我们的案例来让概念更具体化，从而达到初步了解并掌握。BFC 基本功能组件BasicFunction
- 2024-07-04css的布局
1css布局标准流标准流处在网页的最底层，表示页面的位置。在标准流中有两种排列方式，垂直排列，水平排列在css中将元素分为三类，行内元素，块级元素，行内块级元素如果是块级元素，就会垂直排列，如果是行内元素或者行内块级元素,就会水平排列如何让块级元素水平排列呢？ float：left
- 2024-05-30第二十五章CSS中的技巧（导航栏、下拉列表）
1.CSS精灵1.什么是CSS精灵英文叫法 CSSsprites，通常被解释为“CSS图像拼合”或“CSS贴图定位”;其实就是把网页中一些背景图片整合到一张图片文件中，再利用css“background-image”，“background-repeat”,“background-position”的组合进行背景定位，background-position用数
- 2024-05-102024-05-10 BFC是什么
BFC（BlockFormattingContext）即块级格式化上下文，是W3CCSS2.1规范中的一个概念。它指的是浏览器中创建的一个独立的渲染区域，并且拥有一套渲染规则，决定了其子元素如何定位，以及与其他元素的相互关系和作用。BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局，反
- 2024-04-22聊聊css中的BFC
BFC，即BlockFormattingContext（块级格式化上下文），是CSS布局的一部分，用于确定块级盒子的布局及其在页面上的排列方式。BFC是一个独立的布局环境，其中的元素布局不受外部元素的影响，并且它们之间的布局不会互相影响。在一个BFC中，每个盒子按照垂直方向一个接一个地放置。具体来说
- 2024-02-26浮动、bfc-规范、清除浮动总结
介绍参考：浮动、bfc-规范、清除浮动的最佳实践#浮动、BFC规范、清除浮动的最佳实践TIP在讲CSS浮动之前，我们要现在了解下CSS布局有哪些实现机制#一、实现CSS布局的几种策略网页布局的本质是：用CSS来摆放盒子，把盒子摆放到页面对应的位置。在之前的章节我们已经详细
- 2024-02-26BFC详解
1.问题1.1BFC作用一：可以取消盒子margin塌陷计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算1.2BFC作用二：可以阻止该元素被浮动元素覆盖浮动盒区域不叠加到BFC上！！！这是BFC的独立性主要应用于一行中同时存在浮动元素和行内元素，防止行内元素被覆盖（不常用，一般一行均
- 2024-02-26清除浮动（为何必须要是块级元素？清除浮动的本质？）
1.问题清除浮动的一些概念问题，首先要弄清clear:both清除自身左右浮动，实际上视左右的浮动标签为标准流元素所以这里不能是行内元素！！！！因为我视左右的浮动标签为标准流元素，行内元素就会在其右侧继续填充，无法起到换行撑开父元素的作用在父元素的末尾添加一个block元素，并由于clear的特
- 2024-02-17overflow:hidden如何消除浮动的
当一个元素被浮动（float）时，它会脱离正常的文档流，可能导致其父容器无法正确地计算高度，从而影响布局。使用overflow:hidden;时，它会创建一个块级格式化上下文（BlockFormattingContext，BFC），这会导致父容器包裹浮动元素，而不再受到浮动元素的影响。具体步骤是这样的：当一个元素的
- 2024-02-16CSS 的BFC
BFC是什么含义是：blockformattingcontext上下文可以理解为（区域）blockformattingcontext表示被隔离的区间：（BFC的子元素不会对外面的元素产生影响）1.普通流2.定位流3.浮动流0.BFC的规则1.BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列。2.BFC就是页面中一个隔
- 2023-11-23记录--为什么没有人能讲清楚 BFC？
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助一、你看得懂权威的解释吗？1.CSS规范中对BFC的描述CSS规范(英文)|中文翻译浮动，绝对定位的元素，非块盒的块容器（例如inline-blocks，table-cells和table-captions），以及’overflow’不为’visible’的块盒（当该
- 2023-11-0211月春招准备帖子记录自己春招准备
1<style>2.wrap{3overflow:hidden;4/*//新的BFC*/5/*可以看到上面几个案例，6都体现了BFC实际就是页面一个独立的容器，7里面的子元素不影响外面的元素*/8}9p{10color:#f
- 2023-10-31css面试题
1.css中的哪些单位 绝对单位： px:像素单位 相对单位： em:相对父元素字体大小 rem:相对根元素字体大小2.居中的方式1.水平居中1.设置盒子：margin:0auto2.display: flex2.垂直居中 1.vertical-align:middle 实现居中，1. display:i
- 2023-09-0220230829-面试题html+css5道题记录
css预处理工具参考答案：CSS预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序。css预处理器种类繁多，三种主流css预处理器是Less、Sass（Scss）及Stylus；它们各自的背景如下:Sass：2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框
- 2023-08-31CSS BFC 介绍及应用
概念BFC（BlockFormattingContexts块级格式化上下文）是CSS中的一个重要概念。它是页面上一个独立的渲染区域，如果一个元素具有BFC特性，则内部子元素在任何情况下都不会影响到外部元素，也不会被外部元素影响。例如：处理浮动问题：当父元素包含浮动元素时，父元素的高度坍塌，这导致
- 2023-08-17实现两栏布局的第二种方式
目录前言导语 代码部分运行结果前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷导语实现两栏布
- 2023-08-02BFC块级格式上下文
1.什么是块级格式上下文？如何触发？有何特点？如何解决magin塌陷？BFC就是一个独立的空间，就是让内部的子元素不会影响到外面的元素。如何触发？1.浮动元素，float除none以外的值2.定位元素，position的值不是static或者relative。3.display为inline-block、table-cell、tab
- 2023-07-22CSS2.1规范笔记——9.4 常规流
常规流常规流中的盒属于一个FC，可能是BFC或是IFC中的一个。块级盒参与BFC，行内级盒参与IFC。BFCBFC的产生条件：float：left|rightposition：absolute|fixeddisplay：inline-block|table-cell|table-caption（以及匿名的表格元素）overflow:hidden|auto|scrollBFC的布局
- 2023-06-19（四）高度崩塌、BFC与幽灵空白节点、元素水平居中
一、高度崩塌 二、BFC与幽灵空白节点 三、元素水平居中
- 2023-06-16【React工作记录一百零九】前端小知识点扫盲笔记记录10
前言我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣带你进入前端巅峰交流群今天继续对前端知识的小结对称数<!DOCTYPEhtml><htmllang="en"> <head> <metacharset="UTF-8"/> <metahttp-equiv="X-UA-Compatible"content="IE=edge"/>
- 2023-06-01CSS 第8天
CSS第8天复习定位 position relative top,left,right,bottom 子绝父相 absolute 居中 fixed 遮盖 1，2 z-index 拼爹浏览器hack htmlhack csshack 值hack ie6-_ 7! 8|9\0 678910\9 选择器hack 6*htlm 7selector