CSS3_BFC(十二)

BFC

MDN对BFC的解释:块格式化上下文(Block Formating Context, BFC)是web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。

1、开启BFC

flow-root对内容的影响是最低的,但是IE浏览器不支持。

  • 根元素
  • 浮动元素
  • 绝对定位、固定定位的元素
  • 行内块元素
  • 表格单元格:table、thead、tbody、th、td、tr、caption
  • overflow的值不为visible的块元素
  • 伸缩元素
  • 多列容器
  • column-span为all的元素(即使该元素没有包裹在多列容器中)
  • display的值,设置为flow-root
2、BFC作用
  • 元素开启BFC后,其子元素不会再产生margin塌陷问题;
  • 元素开启BFC后,自己不会被其他浮动元素所覆盖;
  • 元素开启BFC后,就算其子元素浮动,元素自身高度也不会塌陷。
3、mrgin塌陷的解决
html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>示例</title>
    <style>
        body {
            display: flex;
        }

        .outer {
            width: 500px;
            background-color: aqua;

            /* 浮动元素 */
            /* float: left; */
            /* 开启定位元素 */
            /* position: relative; */
            /* 行内块元素 */
            /* display: inline-block; */
            /* 表格单元格 */
            /* display: table; */
            /* overflow不为visible */
            /* overflow: hidden; */
            /* 多列容器 */
            /* column-count: 1; */

            /* column-span: all; */
            /* display: flow-root; */
        }

        .inner {
            height: 200px;
            width: 200px;
            margin: 20px;
        }

        .inner1 {
            background-color: yellow;
        }

        .inner2 {
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner inner1"></div>
        <div class="inner inner2"></div>
    </div>
</body>

</html>
相关推荐
IT_陈寒44 分钟前
Vue3性能优化实战:这5个技巧让我的应用加载速度提升了70%
前端·人工智能·后端
树上有只程序猿1 小时前
react 实现插槽slot功能
前端
stoneship1 小时前
Web项目减少资源加载失败白屏问题
前端
DaMu2 小时前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
非专业程序员2 小时前
一文读懂Font文件
前端
Asort2 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer2 小时前
什么是 React 中的远程组件?
前端·react.js
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js
知了一笑2 小时前
「AI」网站模版,效果如何?
前端·后端·产品