BFC盒子

最新推荐文章于 2024-05-07 15:06:23 发布

小可同学啊

最新推荐文章于 2024-05-07 15:06:23 发布

阅读量389

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/m0_55041880/article/details/118096743

版权

前端专栏收录该内容

61 篇文章

订阅专栏

BFC:块级化格式上下文

BFC布局规则

1.内部的box在垂直方向依次排列
2.BFC区域不会与浮动元素发生重叠
3.属于同一个BFC区域的两个相邻的box 外边距会发生折叠
4.计算BFC的高度时浮动元素也参与计算
5.BFC页面是一个隔离容器容器中的子元素不会影响外面的元素

哪些元素会形成BFC盒子

HTML根元素
脱离文档流的元素会形成BFC (position为绝对定位或固定定位)
浮动元素会形成BFC float不为none
display的值为inline-block table-caption flex
overflow的值为hidden的元素会形成BFC区域

BFC用法

自适应两栏式布局：利用BFC 不会与浮动元素发生重叠
闭合浮动：将父元素设置一个BFC 虽然浮动元素参与计算但是不建议这样做因为还是会影响布局
防止外边距折叠：让两个相邻元素处于两个不同的BFC盒子中

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小可同学啊

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

前端CSS必知：BFC及其触发条件

清颖的博客

08-08

7000

文章目录1. bfc的理解（块级格式化上下文）2. 触发bfc的方式：3. bfc解决的问题：外边距合并，检测浮动高度，制作右侧自适应盒子4. bfc布局规则特性：5. 两栏布局6. 补充：7. 块元素高度不设或宽度不设的情况。将本人好久之前的云笔记搬到博客上来，统一维护。 1. bfc的理解（块级格式化上下文）可以看作是隔离了的独立容器，内部元素的布局，不会影响外部元素。可通过css属性触发。浮动元素产生了浮动流，块级元素看不到；文本类属性的元素（inline)，文本元素和产生了bfc的元

BFC是什么？如何触发BFC？（实现两栏/三栏布局）

weixin_56180673的博客

10-29

1475

BFC是什么？如何触发？两栏/三栏布局如何实现？

参与评论您还未登录，请先登录后发表或查看评论

BFC是什么？其实就是创建一个独立的盒子，盒子里面的子元素不会影响到外面元素，反之亦然

weixin_44077629的博客

04-04

1060

文章目录BFCBox：css布局的基本单位Formatting contextBFC的布局规则(渲染规则/约束规则)BFC的生成（即一个块级格式化上下文由以下之一创建）BFC应用场景场景1-解决margin叠加问题场景2-用于布局场景3-用于清除浮动，计算BFC高度总结BFC原理(渲染规则)如何创建BFCBFC应用场景参考 BFC 在解释什么是BFC之前，我们需要先知道Box、Formattin...

BFC

林毅洋

11-16

422

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。触发 BFC body 根元素浮动元素：float 除 none 以外的值绝对定位元素：position (absolute、fixed) display 为 inline-block、table-cells、flex overflow 除了 visible 以外的值 (hidden、auto、scroll) ...

盒子的Block Format Context(BFC)模式

qq_33468418的博客

07-21

388

根据英文的翻译，BlockFormatContext块级格式化上下文。黑子开启这个模式之后，此时这个盒子就是一个独立的渲染区域，在这个区域内做操作，不会影响到外界的布局。

BFC详解

weixin_47450807的博客

03-21

813

一、写在前面今天看到一道面试题，主要是关于BFC的理解，下面将针对BFC的相关特性做出总结。二、何为BFC BFC(Block Formatting Context)格式化上下文，是 web页面中盒子模型布局的CSS渲染模式，指的是一个独立的渲染区域或者是一个隔离的独立容器。三、形成BFC的条件 1、浮动元素，float除none以外。 2、定位元素，position(absolute, fixed) 3、display为以下其中之一的值：inline-block,table-cell,table

bfc的详细介绍以及大总结

01-17

### BFC（Block Formatting Context）的详细介绍与大总结 #### 一、BFC的基本概念 BFC，全称为Block Formatting Context（块级格式化上下文），是CSS中一种特殊的渲染规则，它决定了内部元素如何布局以及与其他...

css布局之BFC模式（block formatting context）

01-19

官方给出的BFC解释是这样的，浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级...

盒子模型及BFC

ttttsuki的博客

06-13

628

盒子模型 1.盒子的组成一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。 2.盒子的大小盒子的大小指的是盒子的宽度和高度。大多数初学者容易将宽度和高度误解为width和height属性，然而默认情况下width和height属性只是设置content（内容）部分的宽和高。盒子真正的

「前端料包」一文吃透盒子模型BFC

程序员小明1024

10-06

434

.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rgba(51, 51, 51, 1) } .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .ma...

深入理解盒子模型——CSS视觉格式化模型|盒模型|定位方案|BFC

E.C.的博客

05-28

932

视觉格式化模型　　页面(文档树)可以想象成是由一个个的Box组合而成的，而视觉格式化模型(Visual formatting model)是一套规则，将这些框布局成访问者看到的样子。　　　　哪些因素控制了这些布局　　　1. 盒的尺寸和类型　　 2. 定位体系 Positioning Scheme （常规流，浮动和绝对定位）　　 3. 文档树中元素之间的关系

盒模型,BFC以及行内块级元素

最新发布

weixin_51097961的博客

05-07

1957

当对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的css基础框盒模型，将所有元素表示为一个个矩形的盒子，每个盒子由四部分组成，分别是内容内边距边框外边距（但是行内元素不会因内边距（padding）和边框（border）而增加其占用的垂直空间，它们的垂直高度主要由line-height属性决定。这意味着，尽管边框和内边距会在视觉上增加元素的大小，但它们在布局上不会增加元素的高度）

盒模型,BFC,清除浮动和定位详解

weixin_65071380的博客

09-18

214

盒模型是指在网页中,每个HTML元素都可以看作是一个盒子,这个盒子包括了元素本身的内容、内边距、边框和外边距等四个部分内容区域(Content):HTML元素的实际内容区域.内边距区域(Padding):内容区域与元素的边框之间的区域边框区域(Border):围绕内容区域和内边距区域的边框,边框可以设置样式,宽度,颜色等等外边距区域(Margin):元素与其他元素之间的空白区域,也可以设置外边距的大小。

css盒模型以及BFC详解

luluan_lin的博客

02-18

672

css盒模型基本概念：标准盒子 + IE盒子模型盒模型包含了元素的margin/border/padding/content(元素内容) 标准模型与IE模型的区别宽度/高度计算方式不同标准盒子模型 width = content的宽度 height = content的高度 IE盒子模型 width = content的宽度 + padding + border height...

盒子模型

xawjz的博客

05-05

235

盒子模型页面布局的三大核心，盒子模型浮动和定位网页布局的过程 1.先准备好相关的相关的网页元素，网页元素基本都是盒子box 2.利用css设置好盒子样式，然后摆放到相应的位置 3.往盒子里装入内容网页布局的核心本质，就是利用css摆放盒子盒子模型的组成所为盒子，就是HTML页面中的布局元素，看做一个矩形的盒子，也就是一个盛装内容的容器。 css盒子模型本质上就是一个盒子，封装周围的HTML元素，它包括：边框，外边距，内边距和实际内容 1.边框（bord...

块级格式化上下文----盒子的bfc

alertloveyou的博客

08-29

184

盒子的BFCbfc的概念：Bfc的原理：**Bfc解决问题：** 　　我们在学习前端的时候，前面最易学的就是html和css，但是，大家真的了解咱们最基础html和css吗？今天我想给大家分享一个css盒子里面的比较深层次的小知识。 bfc的概念： Bfc全称block formatting context直译为“块级格式化上下文”，它是W3C CSS 2.1规范中的一个概念，他决定了元素如何对...