什么是BFC ?BFC的特性和作用

 BFC(Block formatting context)

 直译为块级格式化上下文,把BFC理解成一块独立的渲染区域,BFC看成是元素的一种属性, 当元素拥有了BFC属性后,这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素.

常见的定位方案

### 1.普通流

1.元素按照其在HTML中的先后位置至上而下进行布局

2.行内元素水平排列,直至当行被占满然后换行,块级元素则会被渲染为完整的一整行

3.所有元素默认都是普通流定位

### 2.浮动

元素首先按照普通流的位置出现,然后根据浮动的方向尽可能向左或向右偏移

### 3.绝对定位

 元素整体会脱离普通流,因此绝对定位的元素不会对兄弟元素造成影响

### BFC属于普通流

    把BFC理解成一块独立的渲染区域,BFC看成是元素的一种属性, 当元素拥有了BFC属性后,这个元素就可以看做成隔离了的独立容器。

    ### 如何触发BFC,如何为元素添加BFC这个属性呢

        1.根元素 (<html>)

        2.浮动元素(元素的float值不是none)

        3.绝对定位(元素的position为absolute或fixed)

        4.display为inline-block、table-cell、table-caption、table、table-row、table-row-group、

        table-header-group、table-footer-group、inline-table、flow-root、flex或 inline-flex、grid或 inline-grid

        5.overflow值不为visible的元素

        6.contain的值为layout-content,paint的元素

### BFC特性和作用

        1.可以避免外边距重叠

        html代码

        <div class="cube"></div>

        <div class="cube"></div>

        css代码

         .cube{

            width: 100px;

            height: 100px;

            background-color: cyan;

            margin: 100px;

        }

        本应该上面div的margin-bottom和下面div的margin-top都为100px,呈现200px的外边距,但是块的上外边距和下外边距会合并为单个边距,取最大值,如果margin相等,则仅为一个,这就是外边距重叠。

### 解决办法

        把两个div包裹在两个不同container容器中,用over-hidden触发container的BFC

                .container{

                    overflow: hidden;

                }

   2.清除浮动

        正常我们希望的是看到一圈红色边框包裹着一个天蓝色方块,但是父元素失去了高度支撑;因为我们添加了浮动,使得子元素脱离了文档流,所以只剩下20px边距高度,同样,我们可以通过overflow属性触发父容器的BFC,从而达到清除浮动效果。

        ### css代码:

        .parent{

            border: 10px solid red;

        }

        .child{

            width: 100px;

            height: 100px;

            background-color: cyan;

            float: left;

        }   

        ### html代码

        <div class="parent">

            <div class="child"></div>

        </div>

    ### 解决办法 给父元素设置overflow属性触发父容器的BFC

         .parent{

            border: 10px solid red;

            overflow: hidden;

        }

3.阻止元素被浮动元素覆盖

        给一个元素添加浮动属性,覆盖了另一个元素;如果不要覆盖,触发被覆盖元素的BFC属性

      ### css代码

      .cube1{

            width: 100px;

            height:100px;

            background-color: cyan;

            float: left;

        }

        .cube2{

            width: 200px;

            height:200px;

            background-color: red;

        }

        ### html代码

         <div class="cube1"></div>

         <div class="cube2"></div>

        解决办法

         .cube2{

            width: 200px;

            height:200px;

            background-color: red;

            overflow: hidden;

        }

        


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值