CSS中的BFC详解

已于 2022-11-08 11:46:02 修改
阅读量220 收藏
点赞数
分类专栏： CSS 文章标签： css 前端 css3
于 2022-10-23 23:05:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/literarygirl/article/details/127482865
版权

在这里插入图片描述
BFC的特性和作用
1、避免外边距重叠
2、清楚浮动
3、阻止元素被浮动元素覆盖
第三条提供了布局的一种思路：左边盒子宽度固定，右边盒子宽度占满剩余的宽度，左边设置浮动，右边设置overflow：hidden即可实现
或者三栏布局，两边固定中间占满宽度，也是同样方法左右设置浮动，中间设置overflow:hidden;
https://www.bilibili.com/video/BV1nZ4y147MW/?spm_id_from=333.788

关于两栏布局 的时候如果需要占满剩余宽度是input的时候好像不成功即使设置了display：block也不行
https://blog.csdn.net/weixin_47750287/article/details/124565230
不使用bfc也可以使用两栏布局（margin-left）的作用

cdwhy
关注
专栏目录
CSS中的BFC详解（两栏布局和三栏布局）
weixin_45432334的博客
10-09 1509
一、BFC介绍 BFC（Block fomatting context）“块级格式化上下文”。是Web页面中盒模型布局的CSS渲染模式，是一个独立的渲染区域，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 二、形成BFC的条件 1、根元素 2、float属性不为none 3、position为absolute或fixed 4、display为inline-blo...
【CSS知识点】——解决高度塌陷以及BFC详解
m0_50785976的博客
10-29 293
高度塌陷以及BFC详解
css中的BFC
weixin_48210599的博客
09-11 432
css中的BFC BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。 形成BFC的条件 ​ 1、浮动元素，float 除 none 以外的值； ​ 2、定位元素，position（absolute，fixed）； ​ 3、display 为以下其中之一的值 inline-block，table-cell，table-caption； ​ 4、overflow
CSS中的BFC详细讲解（易懂）
weixin_57677300的博客
02-16 7709
一个BFC区域只包含它的子元素，不包含其子元素的子元素。成为一个BFC区域要满足一定的条件。不同的BFC区域相互独立，互补影响。BFC是属于普通流的，我们可以把BFC看成页面的一块渲染区，他有自己的渲染规则，简单来说就是BFC可以看做元素的属性，当元素有了BFC这个属性，这个元素可以看做隔离了的容器，容器里面的元素不会在布局上影响到外面的元素。
BFC详解
weixin_47450807的博客
03-21 737
一、写在前面 今天看到一道面试题，主要是关于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模式（block formatting context）
01-19
详解BFC【 block formatting context】 BFC这个东西说常见的话你可能不觉得，但是你肯定会常用到，也许你在用的时候也没想到BFC这东西。那它究竟是什么呢，我们来一起看一下。 官方给出的BFC解释是这样的，浮动元素...
css布局 （关于BFC布局、Flex布局、Grid布局）总结整理
Yweivvv的博客
03-15 612
css布局BFC （BFC是指块级格式上下文）产生BFC的方法BFC可以解决哪些问题？常见面试题Flex布局什么是Flex布局？Flex布局模型Flex布局的属性为容器属性和元素属性两种：如何开启Flex布局？/Flex布局的使用容器属性（flex-container）元素属性（flex-items）Grid布局其他常见布局方式 BFC （BFC是指块级格式上下文） （Formatting Contexts 是指格式化上下文） 1.BFC所具有的特性 （1）. 是一个独立的渲染区域，与区域外部毫不相
css中的BFC详解
weixin_48786946的博客
07-05 2566
本文转至[什么是BFC？看这一篇就够了(https://blog.csdn.net/sinat_36422236/article/details/88763187) BFC 定义： BFC(Block formattingcontext)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。 B
CSS的BFC详解
m0_61489612的博客
02-21 211
BFC是即 Block Formatting Contexts (块级格式化上下文)，开启了BFC的元素和它的子元素之间相当于是相互独立的容器，对彼此的操作都不会影响到其他的元素。
CSS之BFC详解
yihanzhi的博客
10-25 580
在了解BFC前，首先需要知道它是什么，它有哪些特性，它是如何形成的。 一、什么是BFC BFC（Block Formatting Context）块级格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。 二、BFC的特性 内部的box会在垂直方向，一个接一个的放置； box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的ma...
CSS中的BFC详解：定义、触发方式及应用场景
小王的技术库
05-25 3616
1.什么是BFC? BFC就是一个css的一个布局概念，是一个独立的区域，是一个环境。 Block Formatting Context：块级格式化上下文。 W3C的官方解释： 它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。 BFC的目的：形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局。 2.如何触发BFC? float不为non
什么是CSS中的BFC？
最新发布
w13966597931的博客
08-21 1003
本文介绍了：①什么是BFC、②如何触发BFC、③BFC的布局规则、④BFC的实际使用场景以及代码演示。
CSS中关于触发BFC
sunshine_hl的博客
10-21 3467
CSS中关于触发BFC
CSS中的BFC
大眼萌
08-13 1675
第一部分：什么是BFC? BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 第二部分：BFC的特征 1、BFC内部，盒子由上至下按顺序进行排列，其间隙由盒子...
CSS浮动详解：清除方法与特性分析
在编写CSS时，合理使用浮动并结合BFC（块格式化上下文）的概念，可以帮助避免这些问题。例如，通过设置`display: inline-block`或`inline-flex`，可以让内联元素在保持文本基线的同时支持浮动，从而减少潜在问题。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值