温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

设置BFC功能及使用的方法是什么

发布时间:2023-03-20 15:59:27 来源:亿速云 阅读:131 作者:iii 栏目:开发技术

这篇文章主要讲解了“设置BFC功能及使用的方法是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“设置BFC功能及使用的方法是什么”吧!

    首先BFC是啥?

    官方描述:块格式化上下文(Block Formatting Context,BFC)是 Web 页面的可视 CSS 渲染的一部分,是块级盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。

    额......

    是的,正常人看完还是不知道BFC是啥。

    我用人类的语言尝试翻译一下:BFC就是一个就是一个容器。只不过这个容器里面元素怎么布局都不会影响外面的元素,外面的元素同样也影响不到这个盒子里面的元素。

    不设置BFC会对网页布局有怎么样的影响?

        .box1 {
          width: 400px;
          border: 10px solid pink;
        }
        .c-box1 {
          width: 200px;
          height: 200px;
          background-color: skyblue;
          float: left;
        }
        .c-box2 {
          width: 200px;
          height: 200px;
          background-color: blueviolet;
          float: left;
        }
        .box2 {
          width: 300px;
          height: 300px;
          background-color: red;
        }
    <div class="box1">
        <div class="c-box1">
        </div>
        <div class="c-box2">
        </div>
    </div>
    <div class="box2"></div>

    设置BFC功能及使用的方法是什么

    由于box1没有设置高度,box1里面的元素设置浮动后,无法将其撑起,从而影响到了外面的box2。那么如果box1是一个BFC的话,那么效果就会如下图一样:

    给box1加上 overflow: hidden;没错这就是让一个容器形成BFC的一种方式。

     .box1 {
          width: 400px;
          border: 10px solid pink;
          overflow: hidden;
      }

    设置BFC功能及使用的方法是什么

    啊?就就就......就这?那么你肯定想问这个BFC还有其他作用吗?

    BFC还有啥作用?

    - 解决盒子高度塌陷的问题

    没错,也就是上面那种情况。

    - 解决盒子margin塌陷的问题

    .box1 {
          width: 100px;
          height: 100px;
          background-color: purple;
          margin-bottom: 30px;
     }
    .box2 {
          width: 100px;
          height: 100px;
          background-color: red;
          margin-top: 10px;
     }
     <div class="box1"></div>
     <div class="box2"></div>

    设置BFC功能及使用的方法是什么

    盒子垂直方向的margin是存在塌陷问题,box2设置的10px向上的margin没起作用。所以,把box1和box2变成一个BFC就可以解决这个问题。

    - 可以防止元素被相邻的浮动盒子覆盖

        .box1 {
          float: left;
          width: 150px;
          height: 200px;
          background-color: purple;
         }
        .box2 {
          width: 200px;
          height: 200px;
          background-color: red;
        }
        <div class="box1"></div>
        <div class="box2"></div>

    设置BFC功能及使用的方法是什么

    这种情况,除了可以box2设置overflow: hidden; 还可以设置float: left。

    设置BFC功能及使用的方法是什么

    没错,上面一直用使用overflow: hidden来设置BFC,其实设置浮动也是一种形成BFC的方式。那么还有没有其他方式?答案是肯定的。

    都有哪些方式来创建BFC

    - 设置浮动,不管是左浮动还是右浮动都可以,float属性值不是none即可

    - 设置定位,position的值不是static或者ralative

    - 设置display,display的值是inline-block、flex或者inline-flex

    - overflow值不为 visible,为 auto、scroll或者hidden

    感谢各位的阅读,以上就是“设置BFC功能及使用的方法是什么”的内容了,经过本文的学习后,相信大家对设置BFC功能及使用的方法是什么这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    bfc
    AI