BFC整理

最新推荐文章于 2024-07-12 20:49:16 发布
最新推荐文章于 2024-07-12 20:49:16 发布
阅读量141 收藏
点赞数 1
分类专栏： CSS 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35542649/article/details/113350575
版权

概念：块级格式化上下文，他是一个独立的渲染区域，这个区域和外部毫不相干

布局规则：

  1. 内部的盒子会在垂直方向，一个接着一个放置
  2. BFC的区域不会与float盒子重叠
  3. 内部的盒子垂直方向的距离有margin决定，属于同一个BFC的相邻盒子的margin会发生重叠
  4. 计算BFC的高度时，浮动元素也参与计算
  5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也是如此

BFC出现场景：

  1. 根元素
  2. float属性不为none
  3. position为absolute或者fixed
  4. overflow不为visibile
  5. display为inline-block,table-cell,table-caption,flex,inline-flex

王哆啦啦
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
【学习整理】BFC
m0_65400139的博客
04-09 211
BFC（Block Formatting Context）
前端面试之BFC
千鱼鱼的日常
08-23 8322
BFC (Block formatting context) “块级格式化上下文” 它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。 触发：  满足下列条件之一就可触发BFC 　　【1】根元素，即HTML元素  　　【2】float的值不为none  　　【3】overflow的值不为visible  　　【4】display的值为inli...
BFC知识点
m0_65282357的博客
03-28 295
定义：bfc就是符合一些特性的HTML标签，可以看做一个隔离的独立容器 bfc的作用： bfc可以避免外边距重叠 清除浮动 阻止元素被浮动元素覆盖 形成bfc的条件： 1.根元素：(<html>) 2.浮动元素（元素的float不是none） 3.绝对定位元素：(元素的osition 为absoluted或者 fixed） 4.display 为inline - block 、 fable － cel 、 table - caption 、 table 、 table - ro.
BFC论坛采集器2.0 Beta 3
07-17
BFC网站数据采集器当前版本（Beta 3）属于测试版本，基本的功能已经实现，但是程序还存在问题，许多附加功能还没有完全完成，发布这个版本的目的只是为了测试程序已完成功能中存在的BUG和收集新的思路与功能。...
整理的面试题.rar
09-22
"整理的面试题.rar"这个压缩包文件很可能包含了多种类型的IT面试题目，旨在帮助求职者准备各种技术面试。以下是对可能包含在其中的一些核心知识点的详细说明： 1. **数据结构与算法**： - **数组、链表、栈、队列*...
FE-Knowledge:前端知识整理
04-28
实现水平居中布局的方案实现垂直居中布局的方案实现水平垂直居中布局的方案两列/三列/多列布局实现的方案BFC及其应用清除浮动的方法常见的兼容性问题CSS绘制三角形、圆形、扇形、菱形CSS3动画简述Rem及其转换原理...
前端面试题整理，包含vue、js、css
03-14
- **双伪元素清除法**：增加BFC（块格式化上下文）特性，提高兼容性。 - **overflow: hidden**：设置父元素的`overflow`为`hidden`，也能达到清除浮动的效果。 **页面间参数传递** 1. **H5数据存储**：使用`...
笔记本：我的笔记本:ledger:
02-04
描述中的内容进一步强化了标题的含义，表明这是一个个人笔记本项目，用户可能用它来记录和整理各种信息。这里的"ledger"可能是指项目的一个特定部分，用于分类、搜索或分析数据。同时，"我的笔记本"暗示这是一个定制...
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1408
title>充电效果
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
uu0216的博客
07-10 1210
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
CSS【详解】层叠 z-index （含 z-index 的层叠规则，不同样式的层叠效果）
朝阳39的博客
07-09 636
仅对已定位的元素（）有效，默认值为0，可以为负值。
css画半圆&&画圆弧
M1512415的博客
07-12 156
【代码】css画半圆&&画圆弧。
CSS关于居中的问题
热爱WebGIS的博客
07-10 656
由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文字，不会太影响观感。我们可以用百分比来表示，子元素相对父元素移动 50%的距离后，再根据子元素的外边距进行调整。值是写死的，如果 son 的宽度发生改变，子元素也无法水平居中。是写死的，如果父元素的宽度发生改变，子元素就无法水平居中了。子绝父相，子元素设置以下属性，也能进行水平垂直居中。子元素 y 轴移动的距离是父子元素高度差的一半，子元素 x 轴移动的距离是父子元素宽度差的一半。子元素相对父元素移动 50%的距离后，使用。
CSS技巧专栏：一日一例 2.纯CSS实现 多彩边框按钮特效
uu0216的博客
07-09 905
content:attr(alt); 通过attr函数 获取本标签的alt值，之所以要这么做，是因为after生成的填充色的图层，会覆盖到按钮上面，导致按钮上写的文字不可见。所以，我们要通过content来输出按钮上的文字。这样写，也是为了让样式和内容脱离。这样我们在html的代码上，给 button 控件写上 alt文字，就可以通过css获取这个文字并输出了。这样，也方便后台程序通过程序动态修改 alt标签输出 的文字，达到修改按钮文字的目标，而不需要去手动修改css文件中的文字。
CSS上下悬浮特效
m0_56164131的博客
07-09 513
要实现一个上下悬浮的特效，可以使用CSS的@keyframes规则和动画属性。
CSS【详解】边框 border，边框-圆角 border-radius，边框-填充 border-image，轮廓 outline
朝阳39的博客
07-10 1062
template > < div class = " border-dashed " > 1:1的虚线 </ div > </ template > < style scoped > .border-dashed {< template > < div class = " border-dashed " > 1:1的虚线 </ div > </ template > < style scoped > .border-dashed {
HTML CSS 基础复习笔记 - 框架、装饰、弹性盒子
forevercui的博客
07-09 1263
弹性盒子 - 学习 Web 开发 | MDN (mozilla.org)flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式align-items：flex-start | flex-end | center | baseline | stretch （单行）
CSS - 深入理解选择器的使用方式
zhugedali_的博客
07-09 671
例如， [href^="https"] 会选择 href 属性值以 https 开头的元素， [href$=".com"] 会选择 href 属性值以 .com 结尾的元素， [href*="example"] 会选择 href 属性值包含 example 的元素。例如， div > p 只会选择直接作为 <div> 元素子元素的 <p> 元素，而不会选择 <div> 元素内部的嵌套 <p> 元素。- :last-child 选择父元素的最后一个子元素。
什么时候使用BFC布局
05-13
BFC（Block Formatting Context）布局是一种常用的布局方式，特别适用于处理浮动元素、清除浮动、防止 margin 重叠等问题。以下是一些常见情况下建议使用BFC布局的场景： 1. 处理浮动元素：当一个元素设置了浮动...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值