• 技术文章 >Web开发 >css教程

    css中BFC布局规则是什么

    小妮浅浅小妮浅浅2021-08-23 20:36:49原创4479

    说明

    1、BFC是页面上隔离的独立容器,容器中的子元素不会影响外部元素。反之亦然。

    这一元素的垂直方向边距将重叠,垂直方向的距离由margin决定,取值。

    2、BFC区域不会与浮动盒重叠(去除浮动原理)。

    3、浮动元素在计算BFC高度时也参与计算。

    实例

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>Document</title>
     
    <style type="text/css">
    .div1 {
    background-color: #ef6f6f;
    width: 200px;
                    height: 100px;
    }
     
    .div2 {
    background-color: #fff086;
    width: 200px;
                    height: 100px;
    }
    </style>
    </head>
    <body>
    <div>div1</div>
    <div>div2</div>
    </body>
    </html>

    以上就是css中BFC布局规则的介绍,希望对大家有所帮助。更多css学习指路:css教程

    本文教程操作环境:windows7系统、css3版,DELL G3电脑。

    专题推荐:css bfc布局规则
    上一篇:css中BFC是什么意思 下一篇:css box-sizing属性是什么

    相关文章推荐

    • css使用transform垂直对齐• css中position常见的四个属性值• css中sticky属性是什么• css中sticky属性有什么特点• css浮动有哪些特性• css浮动元素的规则介绍• css浮动元素的重叠问题• css中clear属性是什么• css清除浮动的原因• css有哪些清除浮动的方法• css中BFC是什么意思

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网