BFC块级格式化上下文
2018-06-15 本文已影响0人
柚子胖鸡_
写于2017-08-29，但是发现简书比个人网站省力气得多，遂搬家至此；
学习BFC之前，务必要理解透彻什么是文档流，以及浮动和定位导致的脱离文档流；
文档流不难理解，今天的重点是bfc，不可乱了主次；
什么是BFC
BFC：Block Formatting Context，块级格式化上下文，一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关；
即里面想怎么样就怎么样不会影响此区域以外的任何元素。
BFC(创建)触发条件
1.根元素 即html
2.float属性不为none
3.position为absolute或fixed
4.display为inline-block, table-cell, table-caption, flex, inline-flex
5.overflow不为visible
BFC约束规则(作用)
1、内部的Box会在垂直方向，一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠,不同BFCmargin不会重叠
3、每个元素的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使浮动也是如此。
4、BFC的区域不会与float box重叠。
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6、计算BFC的高度时，浮动元素也参与计算
接着，我们现在用实例去验证一下；
BFC约束规则 1,2,3验证
<html>
<head>
<meta charset="UTF-8">
<title>bfc</title>
<style>
body{
border: 2px solid green;
}
div{
width: 100px;
height: 100px;
background: red;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 10px;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>
image.png
稍微改变结构即验证 第三条末尾 浮动也是如此；
image.png
BFC约束规则456
<html>
<head>
<meta charset="UTF-8">
<title>bfc</title>
<style>
body{
border: 2px solid green;
}
#div{
width: 400px;
height: 400px;
border: 1px solid red;
}
#d1{
width: 100px;
height: 50px;
background: red;
float: left;
}
#d2{
width: 250px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="div">
<div id="d1">
浮动div
</div>
<div id="d2">
兄弟div
</div>
</div>
</body>
</html>
image.png
overflow: hidden;
float: right;
display: inline-block;
position: absolute;
display: table-cell;
display: table-caption;
display: flex;
display: inline-flex;
在兄弟div上增加以上任意一个即可形成新的bfc；
下图 也是一种分栏自适应布局常用的手段；
image.png
此处需要注意的是，当上图绿色div宽度超过包裹容器的剩余宽度，会换行显示(目前我只测试了chrome，没装ie和其他)；
但是但是display：table-cell无论多宽都不会超过容器不会换行，是和浮动元素在同一行；
当把外层红色边框div 加上overflow:hidden变成bfc时，增加浮动元素高度；
该BFC的高度包含浮动元素的高度，即 计算BFC高度 浮动元素也参与计算；
image.png
不同BFC 垂直margin不会重叠
<html>
<head>
<meta charset="UTF-8">
<title>bfc</title>
<style>
body{
border: 2px solid green;
}
#div{
width: 400px;
/*height: 400px;*/
overflow: hidden;
border: 1px solid red;
}
#d1{
width: 100px;
height: 100px;
background: red;
margin-bottom: 20px;
}
#d2{
width: 100px;
height: 100px;
background: green;
margin-top: 20px;
}
#d2div{
}
</style>
</head>
<body>
<div id="div">
<div id="d1">
div1
</div>
<div id="d2div">
<div id="d2">
div2
</div>
</div>
</div>
</body>
</html>
image.png
现在把div2的包裹容器d2div 加上可以触发bfc的样式(切记不要加多余任何样式,尤其是border)；
#d2div{
overflow: hidden;
}
此时 红绿两个div已经处于不同的bfc中,所以margin不再重叠；
image.png
日后有新的补充···
版权声明：本文原创，转载请注明出处 https://www.jianshu.com/p/040546c79025
