BFC的简单总结

最新推荐文章于 2024-07-20 15:40:46 发布
最新推荐文章于 2024-07-20 15:40:46 发布
阅读量115 收藏
点赞数
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45060976/article/details/123123206
版权

BFC

BFC就是块级格式化上下文的英文翻译的简称，对于BFC来说它没有具体的解释，只可意会不可言传。

怎样触发BFC：

  • 浮动元素，也就是float不是none
  • 绝对定位元素
  • 行内块元素
  • overflow值不为visible的块元素
  • 弹性元素

那么BFC能干嘛呢

  1. 清楚浮动，虽然现在都是使用.clearfix
  2. 防止margin合并
卡门726
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对BFC的总结
weixin_43601554的博客
06-12 292
什么是BFC？一、BFC的定义二、BFC的布局规则三、怎么创建BFC四、BFC的常见作用五、总结 一、BFC的定义 BFC（Block Formatting Context）全称为块级格式化上下文。简单来说，BFC是一种属性，并且只会作用于Block-level box（块级元素）。设置了这种属性的元素会成为一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。 二、BFC的布局规则 属于同一个 BFC 的两个相邻 Box 垂直排列 属于同一个 BFC 的两个相
BFC简单总结
Good_zwn的博客
08-12 146
如何产生BFC：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context 参考：https://www.jianshu.com/p/0d713b32cd0d 1.BFC内部的浮动元素不会乱跑 2.和浮动元素产生边界 ...
BFC学习总结简单易懂
qq_43712187的博客
12-05 107
BFC
简单介绍BFC
Crystal412的博客
09-04 186
简单介绍BFC
逆战班月总结
01-08
然后，右侧元素通过`overflow:hidden`创建一个新的块级格式化上下文（BFC），使其自适应剩余空间。 2. **两列顶宽，中栏自适应布局**： 此布局方式同样用于两栏布局，但特点是顶部栏宽度固定，中间栏自适应。左右...
前端基础学习总结（看大佬文章）
12-02
这能触发BFC（块格式化上下文），从而避免高度塌陷。但可能会导致内容溢出不显示。 - **`:after`伪元素法**：在父元素上使用`:after`伪元素，`content:""`，并设置`display:table`和`clear:both`。这种方法适用于...
前端bfc的介绍与使用
02-23
关于BFC的介绍与使用 这篇文章是我对BFC的理解及总结 带你们了解bfc的布局规则，使用方法，触发条件等内容，理解简单。
前端总结.docx
09-29
Flexbox是一种用于布局的现代CSS模块，使得创建响应式、灵活的布局变得简单。它可以轻松地调整元素大小和位置，特别是在屏幕尺寸变化时。 **重绘和回流** 重绘是浏览器重新绘制元素外观的过程，而回流涉及元素几何...
详解css清除浮动float的七种常用方法总结和兼容性处理
09-24
设置父级元素的overflow属性为hidden，可以创建一个新的BFC（块格式化上下文），从而包含浮动子元素。但在IE6和IE7中，需要配合`zoom:1`来触发hasLayout。代码示例：`.parent { overflow: hidden; *zoom: 1; }` 7. ...
Tailwind CSS：颠覆常规的实用主义设计利器
艾恩小灰灰的博客
07-18 522
Tailwind CSS 是一个实用类优先的 CSS 框架，它不提供预设的组件或设计系统，而是通过一系列小而功能明确的实用类，允许开发者快速构建自定义的设计。与 Bootstrap、Foundation 等传统框架相比，Tailwind 更强调灵活性和可定制性。Tailwind CSS 通过其独特的实用类优先方法，为前端开发带来了新的视角。它不仅简化了样式编写，还提高了开发效率和代码的可维护性。
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 245
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
网页隐藏版之一行小说阅读器
m0_47147246的博客
07-19 346
网页隐藏版一行小说阅读器
HTML、CSS、JS浅浅浅浅浅解
最新发布
lbdking的博客
07-20 1459
初识Web web标准 web标准也被称为网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Cnsortium，万维网联盟）负责制定。 三个组成部分 HTML:负责网页的结构（页面元素和内容）。 CSS：负责网页的表现（页面元素的外观，位置等页面样式，如：颜色、大小等）。 JavaScript：负责网页的行为（交互效果）。 HTML HTML：超文本标记语言 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片，音频，视频等内容。 标记语言：由标签构
CSS|06 背景样式
Catherinemin的博客
07-19 802
距离他左边的盒子的距离为100px，第二个100px表示 背景图片的。/*左内填充，盒子里面的内容到左边边框线的距离，就称为左内填充*/语法： background-color: red;/*background-repeat 平铺*//*background-repeat 平铺*//*background-repeat 平铺*/
前端学习（二）之HTML
2302_79795489的博客
07-18 974
在<input type="text" name="username" value="西瓜大侠">中，2、单选和多选：radio和checkbox（对应value为选项的值，当选中时，这个值会被提交）3、按钮：button、submit和reset（对应value为按钮上的标签文本）4、隐藏字段：hidden（对应value为隐藏在表单中的用户不可见的数值）段落格式标签：加粗b，斜体i，下划线u，删除线s，换行br，水平分割线hr。1、name：给表单控件起的名字，服务器靠这个名字来识别和获取输入的数据。
动态美学：WebKit中CSS转换与动画的魔力
2401_85743969的博客
07-19 725
CSS转换允许我们对元素进行旋转、缩放、移动和倾斜等操作。：移动元素。rotate()：旋转元素。scale()：缩放元素。skew()：倾斜元素。matrix()：更复杂的转换组合。CSS动画允许我们为元素的属性变化定义动画效果。：指定需要动画效果的属性。：指定动画的持续时间。：指定动画的速度曲线。：指定动画的延迟时间。
Tailwind CSS常见用法
solocao的专栏
07-18 336
Tailwind CSS允许在tailwind.config.js配置文件中自定义样式，如颜色、字体大小、边框宽度等。然后，这些自定义样式可以在HTML中通过类名引用，如text-custom-size。
关于css中flex布局垂直居中失效问题的原因
zuo-yiran的博客
07-19 289
flex布局垂直居中失效原因
深入理解CSS BFC与层叠原理，掌握!important的应用
- **行内元素转换**：非BFC内的行内元素会正常流到BFC外部，而BFC内的行内元素则保持在内部。 - **边距合并**：BFC内外的外边距不会折叠，除非它们之间有浮动或 clearance。 **2. CSS层叠和继承规则**： - **层叠...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值