AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

CSS之BFC

2022-11-26 82
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： CSS之BFC

1. 什么是BFC？

BFC(块格式上下文), 在css中渲染页面是按照块级盒子布局，W3C对于BFC的定义如下：

浮动元素和绝对定位元素，非块级盒子的块级容器，
以及overflow值不为 visiable 的块级盒子，都会为他们的内容创建新的BFC

2. BFC的作用

1. 不和浮动元素重叠
2. 清除元素内部浮动
3. 防止margin重叠

3. BFC的形成条件

1. float的值不能为none
2. overflow的值不能为visible
3. display的值为table-cell, table-caption, inline-block中的任何一个
4. position的值不为relative和static
文章标签：
前端开发
关键词：
CSS BFC
卖坚果的怪叔叔
目录
相关文章
天玄TX
|
6月前
|
前端开发 容器
CSS 中BFC是什么？
CSS 中BFC是什么？
天玄TX
119 1
朝阳39
|
4月前
|
前端开发 容器
css【详解】—— BFC 和 IFC
css【详解】—— BFC 和 IFC
朝阳39
43 1
小周sir
|
6月前
|
前端开发 容器
CSS面试考点：隐藏元素、BFC、垂直居中、CSS3新特性
【4月更文挑战第2天】 CSS面试考点：隐藏元素、BFC、垂直居中、CSS3新特性
小周sir
53 10
snowball_win
|
前端开发 容器
CSS：BFC（Block Formatting Context 块级格式化上下文）
CSS：BFC（Block Formatting Context 块级格式化上下文）
snowball_win
83 0
&ACE&
|
6月前
|
前端开发 容器
CSS BFC是什么，应用实例
CSS BFC是什么，应用实例
&ACE&
49 0
啊理八八
|
前端开发 容器
前端CSS理解 —— BFC(块级格式化上下文)
前端CSS理解 —— BFC(块级格式化上下文)
啊理八八
67 0
范德萨_
|
前端开发 容器
CSS中的BFC是什么？
CSS中的BFC是什么？
范德萨_
86 0
半虹
|
前端开发 容器
CSS实战笔记(九) BFC
CSS实战笔记(九) BFC
半虹
104 0
CSS实战笔记(九) BFC
HoMeTown
|
前端开发
【CSS】有意思的BFC：Block Formatting Context（块格式化上下文）！🤡
前言 大家好，我是HoMeTown，今天想聊一聊CSS中的BFC，很多朋友应该都听过这个名词，搞懂BFC可以让我们理解CSS中一些很诡异的地方，话不多说，直奔主题！
HoMeTown
59 0
Boale_H
|
前端开发 容器
详细说说CSS中的BFC概念
详细说说CSS中的BFC概念
Boale_H
83 0
详细说说CSS中的BFC概念