css之BFC

最新推荐文章于 2023-01-29 17:29:03 发布
最新推荐文章于 2023-01-29 17:29:03 发布
阅读量298 收藏
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RheaWang/article/details/75897756
版权

BFC定义：Block formatting context ,它是块盒子的布局发生，浮动互相交互的区域。主要是可以解决外边距合并，清除浮动，和布局。
什么情况下会触发BFC呢？
这里写图片描述
一个块格式化上下文包括创建它的元素内部的所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。
块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

摘自MDN

RheaWang
关注
专栏目录
CSS之BFC
从来无所求，所得皆惊喜！
06-04 1417
BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。
10分钟理解CSS BFC原理及其应用
09-27
CSS BFC（Block Formatting Context，块级格式化上下文）是Web页面布局中的一个重要概念，它定义了一个独立的渲染区域，具有自己特定的布局规则。理解BFC的原理对于解决CSS布局问题和优化页面样式有着重要作用。 ...
CSS 之 BFC
qq_45284875的博客
01-09 634
CSS BFC： 块级格式上下文，BFC是一个独立的区域，不会影响其他的区域的布局，每一个被bfc元素的子元素不会对外面的元素产生影响 BFC触发的条件： 1. body: body是bfc元素 2. float: left，right,（不是none默认值） 3. position：absolute、fixed、(非relative) 4. 块级元素overflow：scroll、auto、hidden、（非visible） 5. display: flex、inline-block、table-
CSS之BFC详解
yihanzhi的博客
10-25 596
在了解BFC前，首先需要知道它是什么，它有哪些特性，它是如何形成的。 一、什么是BFC BFC（Block Formatting Context）块级格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。 二、BFC的特性 内部的box会在垂直方向，一个接一个的放置； box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的ma...
css之BFC特性
weixin_63712639的博客
01-01 183
BFC特性也就是块级格式化上下文, 是CSS可视化渲染的一部分，它是一块区域，规定了内部块盒的渲染方式，以及浮动相互之间的影响关系. 当元素设置了overflow样式时，该元素就构建了一个BFC，BFC在计算高度时，内部浮动元素的高度也要计算在内，也就是说技术BFC区域内哪怕只有浮动元素，BFC的高度也不会发生塌缩，所以就可以利用BFC特性达到清除浮动的目的，只需要设置overflow属性就可以了,这个方法只适用于因为浮动而导致的父元素塌陷的问题,不能解决定位所带来的父元素塌陷问题. ...
CSS之BFC理解
qq_43569680的博客
07-21 172
CSS之BFC理解 BFC的介绍 BFC是一种规则，就像孙悟空三打白骨精里面孙悟空划了一个圈让师父和师弟在圈里，这样子白骨精就不能伤害师父和师弟。 BFC的作用就是一种隔离和保护。 BFC解决问题场景 比如说很多页面都有广告的部分，也提供用户点击关闭的按钮，这样子的广告一般都是用BFC创建的，因为用户点击关闭以后不能影响整个页面的布局，这样子的广告经常会设置position:absolute，这样子我们就可以给广告进行任意的定位了。不过这样子滚动到下面就看不到内容了。想要设置滚动以后依然可以看到内容则
CSS之BFC浅析
Bennett_G博客
02-14 475
CSS之BFC浅析前言一、BFC是什么？二、产生BFC的条件三、BFC的约束规则结语 前言 无意间看到一个web前端面试场景，面试官询问你了解BFC吗？ 此时我懵了，转职前端也一年有余了，BFC第一次听说，真是羞愧呀???????????? 所以本着知耻而后学的????，特意去查找了一番资料，学习学习???????????? 提示：以下是本篇文章正文内容，仅供大学一起参考学习 一、BFC是什么？ BFC (Block Formatting Context):块格式化上下文，是用于布局块级盒子的一块独
css之BFC块级格式化上下文
low666的博客
04-08 580
css之BFC块级格式化上下文 BFC 定义 BFC（块级格式化上下文），一个创建了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题 BFC是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素作用。 ...
css之BFC是什么
最新发布
e87e09e11的博客
01-29 537
css之BFC讲解
前端CSS之BFC
weixin_45422557的博客
01-13 117
这里写自定义目录标题什么是BFC其作用特性： 什么是BFC BFC全称为块级格式化上下文（block formatting context） 我们知道前端文档流包括普通流、浮动流、定位流，而BFC属于普通流的一种；BFC是一个隔离的独立容器，里面的子元素不会影响外面的元素，反之亦如此。 触发BFC的情况 1． 设置了float属性，并且不为none 2． position属性为absolute或fixed 3． display为inline-block、table-cell、table-caption、fl
css布局之BFC模式（block formatting context）
01-19
详解BFC【 block formatting context】 BFC这个东西说常见的话你可能不觉得，但是你肯定会常用到，也许你在用的时候也没想到BFC这东西。那它究竟是什么呢，我们来一起看一下。 官方给出的BFC解释是这样的，浮动元素...
CSS保持长宽比
RheaWang的博客
08-09 4198
CSS保持长宽比，主要是用于响应式设计的iframe、img、video之类的元素。关于实现长宽比，有以下几种方案： 垂直方向的padding 主要是利用padding-top或者padding-bottom的百分比来实现容器长宽比。padding的百分比值是根据容器的width来计算的。且容器内所有元素都需要采用position:absolute。padding&calc() 采用的是pa
CSS合集
RheaWang的博客
08-29 805
position属性 三种定位机制：普通流，浮动和绝对定位。 position属性分别为static|relative|absolute|fixed|sticky|inherit static为元素默认属性,没有定位（忽略z-index,left,bottom,right,top声明） relative是相对于自身原本的位置进行偏移，可设置left，bottom等属性进行
关于z-index的理解
RheaWang的博客
07-06 637
1. 层叠的黄金准则： 1.当具有明显的层叠水平标示的时候，如识别的z-index值，在同一个层叠上下文领域，层叠水平值大的覆 盖小的； 2.当元素的层叠水平一致，层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。2 层级关系的比较 相对于同级比较，默认(position:static)情况下文档流后面的元素会覆盖前面的；对于同级元素，position不为st
Bootstrap相关特性
RheaWang的博客
08-07 632
Bootstrap为什么是移动设备优先 当不加媒体查询样式时默认的是超小屏幕(<768px)。也就是对应于移动设备上的样式，所以称之为移动设备优先。 栅格系统 在栅格系统中，是通过媒体查询的方式来创建关键的分界点阈值。系统自动分为12格。
左边定宽，右边自适应宽度布局
RheaWang的博客
08-10 493
浮动布局 margin+浮动定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding:0; } #lef
css继承和非继承属性
RheaWang的博客
08-06 451
不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-brea
css之居中布局
RheaWang的博客
07-06 395
1. 水平居中 针对于行内元素(inline):text-align:center; 针对于块级元素(block):宽度设置为auto; 针对于多个块级元素，对父元素设置text-align:center;对子元素设置display:inline-block;或者使用flex布局。2. 垂直居中 对于行内元素(inline) 单行:设置上下padding相等；或者设置line-height
10分钟掌握CSS BFC原理与实战应用
本文档深入浅出地讲解了CSS BFC（Block Formatting Context，块级格式化上下文）的概念、原理及其在网页布局中的应用。首先，作者通过介绍常见的三种定位方案——普通流、浮动和绝对定位，让读者了解它们的基本工作...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值