共计 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; 是不会产生负作用的一种形式,当然在理论开发中,能够联合以后布局来抉择适宜的形式;
正文完