BFC相关

最新推荐文章于 2022-02-20 20:49:09 发布
最新推荐文章于 2022-02-20 20:49:09 发布
阅读量106 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css优化 文章标签： BFC
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iteye_2245/article/details/82486856
本文介绍了块级格式化上下文(BFC)的概念及其触发条件，并详细阐述了BFC的主要特性，包括如何阻止外边距叠加、如何避免与浮动元素重叠等，为网页布局提供了深入的理解。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

     块级格式化上下文，独立的渲染区域。

 

     触发BFC

 

  • float非none
  • overflow非visible
  • display：table-cell | table-caption | inline-block
  • position：absolute | fixed
  • fieldset元素

 

 

 

 

 

      BFC特性：

 

  • 块级格式化上下文阻止外边距叠加
  • 块级格式化上下文不会重叠浮动元素
  • 块级格式化上下文可以包含浮动
  • 计算 BFC 的高度，浮动原生也参与计算

 

       BFC的元素就是一个独立的盒子，里面的子元素不会再布局上影响外面的元素，属于文档中的普通流

BFC详解
weixin_47450807的博客
03-21 820
一、写在前面 今天看到一道面试题，主要是关于BFC的理解，下面将针对BFC的相关特性做出总结。 二、何为BFC BFC(Block Formatting Context)格式化上下文，是 web页面中盒子模型布局的CSS渲染模式，指的是一个独立 的渲染区域或者是一个隔离的独立容器。 三、形成BFC的条件 1、浮动元素，float除none以外。 2、定位元素，position(absolute, fixed) 3、display为以下其中之一的值：inline-block,table-cell,table
【CSS面试题】BFC
weixin_63681863的博客
03-02 756
BFC全称是Block Formatting Context，意思就是块级格式化上下文。你可以把BFC看做一个容器，容器里边的元素不会影响到容器外部的元素。
BFC相关内容
weixin_45799003的博客
05-26 118
(block formating context)块级格式化上下文 创建特殊区域 1.形成BFC 根元素或其他包含根元素的元素。 浮动元素。 绝对定位元素。 内联块。 表格单元格。 表格标题。 overflow块元素。 样式display:flow-root。 样式column-span:all。 2.相关内容 内部的box将会独占宽度，且在垂直方向上一个接一个排列;box在垂直方向上的间距由margin属性决定，同一个BFC的两个相邻box的margin会出现边距折叠现象;每个box在水平方向上的左边缘与
BFC相关知识
qq_43013760的博客
11-16 160
bfc相关知识 一.BFC定义 BFC（Block Formatting Context）就是块级格式化上下文，是页面盒模型布局中的一种CSS渲染模式，相当于一个独立的容器，里面的元素和外面的元素相互不影响。 二.创建BFC的方式主要有： 1.根元素() 2.浮动元素（元素的 float 不是 none） 3.绝对定位元素（元素的 position 为 absolute 或 fixed） 4.行内...
BFC相关知识点
weixin_43700362的博客
12-10 153
定义 BFC(Block formating context) 直译为“块级格式化上下文”。指页面中的渲染区域，并且拥有一套渲染规则，它决定了其子标签如何定位，以及与其他标签的相互关系和作用。 如何生成BFC 1 根元素（比如html） 2 float的值为left或者right 3 overflow的值为hidden或者scroll或者auto 4 display 的值为inline-block...
BFC相关理解
ll_0801xyz的博客
08-17 444
BFC
BFC相关问题简介
老衲的少女心i~
03-18 140
BFC 我们认为浏览器会分为几部分： 用户界面：浏览器中可见的地址栏、前进后退、打开书签、历史记录。 网络，浏览器开启网络线程发送请求或下载资源文件。 浏览器引擎：最核心的东西。用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据，它是浏览器中各个部分相互通信的核心。 渲染引擎：（浏览器内核），解析DOM文档和CSS规则将内容排版到浏览器中。 UI后端：就是浏览器窗口中的各个控件。 javascript解释器，浏览器解释和执行javascript脚本的部分（v8） 数据持久化，cookie、sess
前端_BFC相关问题
Andy
02-20 688
前端_BFC相关问题
css盒模型以及BFC相关
weixin_43026567的博客
10-11 252
基本概念：标准模型+IE模型 盒子模型的概念可以结合我们日常生活中的“箱子”来理解，日常生活中所见的“箱子”可以装一些物品，这里说到的盒模型，同样也可以放一些内容。 标准模型和IE模型的区别 标准模型：宽高只包含content的宽高 IE模型：宽高包含border css如何设置这两种模型 box-sizing:content-box; /* 标准模型，浏览器默认 */...
BFC的相关知识
ZXH2017的博客
03-11 281
BFC（Block Formatting Contexts）基本概念：块级，格式化，上下文原理：BFC这个元素的垂直方向的边距会发生重叠BFC的区域不会与浮动元素的float重叠独立的容器，内外元素互不影响计算BFC高度，浮动元素也参与计算那么如何创建BFC呢？float不为none的时候position不为static或者relative的时候display为与table相关值的时候overfl...
诱发BFC的原因及处理方案
01-07
本文将深入探讨三种常见的定位方案：普通流、浮动和绝对定位，以及与之相关的Block Formatting Contexts (BFC)的概念、触发条件和实际应用。 **一、定位方案** 1. **普通流 (normal flow)**：这是元素默认的布局...
BFC
最新发布
03-19
好的，用户想了解BFC的概念以及如何解决相关的CSS布局问题。首先，我需要回忆BFC的定义和作用。根据引用[5]，BFC是块级格式化上下文，它让内部元素和外部元素互不影响，形成一个隔离的环境。这有助于解决布局中的...
img设置背景图
Focus-Fe
10-25 3372
      如何给img元素设置背景图：        img{ display:block; background:url("*"); padding: 10px; }        如何给img元素设置双边：   img{ display: block; padding: 1px; background:white...
type=file的样式控制---宽度(部分兼容性写法)
Focus-Fe
12-10 515
1.关于input的type=file控件的宽度问题。   -------FF下单纯地设置width还是没有作用，可以用size去设置宽度。     <input type="file" size="" style="width:"/>   --------chrome下这个写法还是无法兼容 ...
图片格式汇总
Focus-Fe
11-01 294
1、jsp(JPEG)   JPEG是一种针对相片影像而广泛使用的一种失真压缩标准方法。本身只有描述如何将一个影像转换为字节的数据串流，但并没有说明这些字节如何在任何特定的储存媒体上被封存起来。 JPEG的压缩方式通常是破坏性资料压缩，意即在压缩过程中图像的品质会遭受到可见的破坏。即有损压缩。 JPEG在色调及颜色平滑变化的相片或是写实绘画上可以达到它最佳的效果。在这种情况下，它通常比完...
关于页面跨平台字体样式探究
Focus-Fe
07-29 226
前面写了一篇“Mac下的字体”，去各大网站关注了一下css代码，下面是QQ空间的处理方式，记录下来。     .os_winXp{font-family:Tahoma} .os_mac{font-family:"Helvetica Neue",Helvetica,"Hiragino Sans GB",Arial} .os_vista,.os_win7{font-family:"Micro...
IE6系列之双倍边距
Focus-Fe
12-13 191
     本文记录一下ie6下：      float元素的浮动方向和margin方向的一致。      比如：float:left，margin-left才会产生双倍边距。      http://blog.sina.com.cn/s/blog_818a1e5b0100xxk4.html ...
关于如何选择图片格式
Focus-Fe
11-01 190
给出几种场景下对应的图片格式：   1、广告图片、照片、颜色非常丰富的图片 JPG    2、Sprite、图标、简单、对比、文本 PNG8   3、半透明、效果图、高质量图 PNG24   4、动画 GIF     图片大小限制：   1、运营图片单张不能超过100k    2、Icon图片单张不能超过5k ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值