BFC之浅析篇_html/css_WEB-ITnose
程序员文章站
2022-05-06 13:14:11
...
BFC是什么呢?
掏粪男孩?
当然不是咯。BFC,英文名Block formatting context,直译为“块级格式化上下文”。它是W3C CSS 2.1规范中的一个概念,决定了元素如何对内容进行定位,以及与其他元素的关系和相互作用。下表就是成为BFC元素后的特性以及如何成为BFC。
BFC(参考W3C) | |
特性 |
进行盒模型布局的时候,如果一个元素符合了成为BFC的条件,那么该元素就成为了一个隔离的独立容器,BFC的区域不会与外部浮动元素重叠,且在同一个BFC内的两个相邻块级元素的外边距会重叠,但不同 BFC外边距不会重叠;在计算BFC高度时,将它内部的浮动元素也包含在内。 总之,BFC与外部元素互不影响 |
触发BFC的方法 |
1、 根元素 2、 float属性不为none 3、 position为absolute或fixed 4、 overflow的值不为visible 5、 display的值为table-cell,table-caption,inline-block中的任何一个。 |
谈了半天,你可能会问,咦,葛葛,那使元素成为BFC到底有么子用呢?
这就得,从它的特性入手,特别是我加粗的部分,可以知道,BFC元素可以防止与浮动元素重叠嘛。
恩?什么意思。看看下面的demo
BFC
上一篇: 拔高PHP代码的性能10条建议
下一篇: ps中的油漆桶工具如何使用
推荐阅读
-
HTML5游戏开发进阶篇之单位智能移动实现教程
-
前端面试基础-html篇之H5新特性
-
第一篇:前端知识之HTML内容
-
CSS3之圆角_html/css_WEB-ITnose
-
CSS3之弹性布局_html/css_WEB-ITnose
-
自学篇之js 提取复选框和单选框的值 和纯css的3D按钮_html/css_WEB-ITnose
-
html之div始终停留在屏幕中间部分_html/css_WEB-ITnose
-
终于成为博客员的一员了,这是我的第一篇博文,写一个关于ul li内容宽度的问题和解决方案_html/css_WEB-ITnose
-
CSS-浮动篇float_html/css_WEB-ITnose
-
CSS 之 核心篇_html/css_WEB-ITnose