关于前端:对BFC的理解和创建

54次阅读

共计 1366 个字符,预计需要花费 4 分钟才能阅读完成。

一、定义

1、BFC 是 Block(块)Formatting(格式化)Context(内容)的简写,意思就是块级格式化上下文。就是一个独立的块级渲染区域,该区域领有本人的渲染规定,与区域内部没关系;
2、界面渲染完后,切到调试模式,按 ctrl+shift+ c 再用鼠标挪动界面上,能够清晰的看到每个盒子构造都是独立的,父级盒子的高度都是饱和的;

二、为什么要学习和了解 BFC

1、第一种状况,浮动会脱离文档流,导致父级元素高度为零,前面的盒子也随着受影响。

<style type="text/css">
  .child {
     float: left;
     width: 100px;
     height: 100px;
     background: #FF0000;
  }

  .child+.child {margin-left: 5px;}
  .test{
     background: #00FFFF;
     width: 600px;
     height: 100px;
   }
</style>
<div class="content">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>
<div class="test">00009</div>


从后果来看,因为脱离文档流,导致父级 content 是没有高度的,影响还是很显著的,这个时候让父级 content 造成 BFC 就能完满解决这个问题。

2、margin 带来的塌陷问题

.parentBox{
    width: 300px;
    height: 300px;
    background-color: red;
}
.sub{
    width: 100px;
    height: 100px;
    background-color: #00FFFF;
    margin-top: 20px;
}

<div class="parentBox">
    <div class="sub"></div>
</div>


只是给子元素增加了 margin-top:20px,然而父级元素向下偏移了 20px,这个就是 margin 塌陷,给父级元素创立 BFC 即可。
论断:既然有 BFC 这个概念,必定是能够解决某些问题或者优化开发,要不然就没有它存在的意义。

三、如何创立 BFC

1、display:inline-block 能够创立 BFC,然而这样将元素改成了行内块级;

.parentBox{display: inline-block;}

2、父级元素增加浮动,这样父级元素多了一个浮动,然而给父级的父级有多了一个负作用;

.parentBox{float: left;}

3、通过定位 position,只有不是 static 或者 relative 就能够造成 BFC;

.parentBox{
  position: fixed;
  // position: absolute;
}

4、弹性布局 flex 也是能够创立 BFC 的

.parentBox{
  display: flex;
  //display: inline-flex;
}

5、overflow:hidden 能够创立 BFC,这种形式也是比拟支流的创立 BFC 的形式;

.parentBox{overflow: hidden;}

论断:通过以上形式几种形式能够都能够创立 BFC,overflow:hidden; 是不会产生负作用的一种形式,当然在理论开发中,能够联合以后布局来抉择适宜的形式;

正文完
 0