BFC布局

最新推荐文章于 2024-02-09 11:34:15 发布
最新推荐文章于 2024-02-09 11:34:15 发布
阅读量102 收藏
点赞数
文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60677470/article/details/120543903
版权

BFC

1.什么是BFC？

  • 直译块格式化上下文（Block Formatting Context），它是一个独立渲染的区域

一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

2.如何触发BFC或者为元素添加BFC属性？

  • 根元素html
  • 浮动元素float的值不是none
  • 定位元素的position为absolute或fixed
  • display为inline-block, table-cell, table-caption, flex, inline-flex
  • overflow的值不为visible

3.BFC的特性和作用

1.可以避免外边距重叠
2.清除浮动
3.阻止元素被浮动元素覆盖

奶茶要少糖
关注
BFC规则
小泽哥哥的博客
08-26 359
css中BFC规则何为BFCBFC规则 何为BFC BFC（Block formatting context）直译为“块级格式上下文”。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相干。 BFC规则 1、内部的box会在垂直方向，一个接一个的放置。 2、box垂直方向的距离由margin决定。属于统一个...
bfc三栏布局
m0_71814235的博客
07-18 170
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）. 是一个独立的渲染区域，与区域外部毫不相
什么时候使用BFC布局
05-13
以下是一些常见情况下建议使用BFC布局的场景： 1. 处理浮动元素：当一个元素设置了浮动属性后，它会脱离文档流并可以覆盖其他元素。此时可以将其父元素设置为 BFC，使得浮动元素只能在 BFC 内进行布局，从而避免...
面试之BFC布局||圣杯布局||双飞翼布局
Sunday97的博客
06-02 517
一、BFC布局 BFC，即Block Formatting Contexts（块级格式化上下文），具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会再布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。 1、BFC 布局规则 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 ...
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...
被忽略的BFC
罗小黑
08-20 260
什么是BFC BFC（Block formatting context）译为“格式快上下文”，是一个独立渲染区域，规定了内部的子元素如何布局，并且与这个区域外部的关系。 什么情况下会产生BFC 根元素（注意：这里必须手动设置，默认不触发BFC） float属性不为none position为absolute或fixed display为inline-block、table-cell、tab...
布局BFC
zpcqdkf的博客
05-22 156
bfc:快级执行山下文，布局中一个独立的区域，与外部毫不相干。BFC：布局规则    1.内部的box会在垂直方向上一个接一个的放置。    2.内部的box在垂直方向上距离由margin决定，属于同一个bfc的相邻的margin会发生重叠。    3.开启bfc的区域，不会与开启浮动的box重叠。    4.计算bfc高度时，浮动元素也计算在内。开启bfc:    1. float属性不为non...
css的布局（BFC）
最新发布
sinat_34896766的博客
02-09 1597
使用了BFC相当于加了容器隔离，使BFC内部的元素与外部元素在布局上互不影响通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。c、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。d、 BFC的区域会计算盒子到父盒子margin-top的距离。a、BFC的区域不会与 float的元素区域重叠。b、计算BFC的高度时，浮动子元素也参与计算。元素首先按照普通流的位置出现， 然后根据浮动的方向尽可能的向左或向右偏移。
十分钟理解BFC布局
AmberWu
03-19 9567
说起BFC大家可能觉得有点陌生，估计看完文章之后，都会觉得这些平时也都在用啊，只是不知道叫BFC罢了。 先来看看常见的定位方式 定位方案是控制元素的布局，常见的有三种： 普通流（normal flow） 其实就是元素按照再HTML中的先后位置之上而下布局，在这个过程中，行内元素水平排列，直到当行被沾满然后换行，块级元素则会被渲染为完整的一个新行，除非另外制定，否则所有元素默认都是普通...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值