辉太郎看前端(BFC的简单理解)

最新推荐文章于 2024-03-23 00:06:53 发布

辉Gg呀！

最新推荐文章于 2024-03-23 00:06:53 发布

阅读量173

点赞数 1

分类专栏：笔记文章标签： html css

本文链接：https://blog.csdn.net/m0_50512274/article/details/112789209

版权

笔记专栏收录该内容

57 篇文章 0 订阅

订阅专栏

前言

BFC其实就是块级格式化上下文的意思，简单理解呢？BFC就是一种css布局方式。将元素设置成一个独立的布局环境，让内部布局不受外部的影响，他也不会去影响外部。

BFC如何实现

overflow：auto/hidden; overflow属性的值为auto或hidden时盒子就会成为BFC。
position:absolute/fixed; position的值为absolute或fixed时盒子也会成为BFC。
float:left/right; float的值为left或者right时盒子会成为BFC。
display:inline-block/ table-cell/ table-caption/ flex/ inline-flex; display的值为以上时盒子会成为BFC。

BFC的应用

可以用来自适应布局

右边宽度固定，右边自适应

代码展示

 <style>
 //去除默认样式
    *{
      margin: 0;
      padding: 0;
    }
    //设置宽度
    html,body{
      width: 100%;
      height: 100%;
     
    }
    //整体盒子宽度
    #box{
      width: 100%;
      height: 300px;
      display: flex;//在一行显示，设置为弹性盒子
    }
    //左边盒子宽度
    .left{
      width: 200px;
      height: 100%;
      background-color: #808080;
    }
    //右边盒子自适应
    .right{
      flex: 1;//剩余空间自适应
      background-color:#008800;
    }
  </style>
<body>
  <div id="box">
    <div class="left">我是左边内容</div>
    <div class="right">我是自适应</div>
  </div>
</body>

配图

在这里插入图片描述

注：利用`display:flex;`和`flex:1;`实现的自适应布局。

可以清除浮动

子元素浮动导致父级高度塌陷

浮动后的效果展示
问题解决

给父级添加overflow:hidden;使父级成为 BFC

代码展示

<style>
 #box{
      width: 600px;
      margin:20px;
      border: 2px solid #000;
      overflow: hidden;
    }
    .left{
      width: 200px;
      height: 200px;
      background-color: #808080;
      float: left;
    }
    </style>

效果图展示

注：其余清除浮动请参考清除浮动的几种解决方案。

解决垂直边距重叠

兄弟元素设置上下边距显示最大边距而不是两边距和的问题。

设置边距问题出现配图

在这里插入图片描述
2. 解决上下边距重合

添加空余元素，设置overflow：hidden;

<style>
 .left{
      width: 200px;
      height: 200px;
      margin: 50px;
      background-color: #808080;
    }
    .center{
      overflow: hidden;
    }
    .right{
      width: 200px;
      height: 200px;
      margin: 50px;
      background-color:#008800;
    }
</style>
<body>
  <div id="box">
    <div class="left">我是左边内容</div>
    <div class="center"></div>
    <div class="right">我是自适应</div>
  </div>
</body>

效果图

总结

BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。
BFC的区域不会与float重叠。
计算BFC的高度时，浮动元素也被计算在内。

辉Gg呀！

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
辉太郎看前端(BFC的简单理解)

前言BFC其实就是块级格式化上下文的意思，简单理解呢？就是给设置成一个独立的布局环境，让内部布局不受外部的影响，他也不会去影响外部。BFC就是一种css布局方式。BFC如何实现overflow：auto/hidden; overflow属性的值为auto或hidden时盒子就会成为BFC。position:absolute/fixed; position的值为absolute或fixed时盒子也会成为BFC。float:left/right; float的值为left或者rig
复制链接

扫一扫