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

    css中BFC布局规则是什么

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

    说明

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

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

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

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

    实例

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    <!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学习网