FC formatting context

# FC formatting context

# BFC

在页面中元素都有一个隐含的属性叫作Block Formatting Context，即块级格式化上下文，简称BFC。该属性能够设置打开或关闭，默认是关闭的。页面上的一个隔离渲染区域，容器里面的子元素不会在布局上影响到外面的元素

一旦开启元素的BFC后，元素将会具备如下特性：

父元素的垂直外边距不会和子元素重叠
开启BFC的元素不会被浮动元素所覆盖
开启BFC的元素能够包含浮动的子元素

# 普通文档流布局规则

浮动的元素是不会被父级计算高度
非浮动元素会占据浮动元素的位置
margin会传递给父级
两个相邻元素上下margin会重叠

# BFC布局规则

浮动的元素会被父级计算高度（父级触发了BFC）
非浮动元素不会占据浮动元素位置（非浮动元素触发了BFC）
margin不会传递给父级（父级触发了BFC）
两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发）【margin重叠三个条件:同属于一个BFC;相邻;块级元素】

# 产生方式

float 不为none
overflow不为visible
position不为relative和static
display为table-cell table-caption inline-block之一
根元素

BFC作用 :多栏布局,清除浮动,上下margin重叠

# 上下margin重叠叠

相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。

解决方法：

养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。
BFC

# 父子margin无效

<style>
.box{
width:100px;
height:100px;
background:#ccc;
}
.wrap {
  background:yellow;
  /* padding-top:1px */
}
.wrap h1{
  background:pink;
  margin:40px;
}
</style>
<body>
<div class="box">box</div>
<div class="wrap">
  <h1>h1</h1>
</div>
</body>

wrap元素与h1元素之间l理论上本该有个40px的上下margin值,然而实际上父子元素并没有存在margin值，与此同时，两个div元素的间距为40px。遇到这种情形，如何处理？处理方法其实有很多， 在wrap元素中添加:overflow:hidden;或者overflow：auto；使其父元素形成一个BFC；也可以在wrap元素中添加border：1px solid；或是padding：1px； 这些都可以有效解决父子元素margin重叠问题。

# BFC特性

上下margin重叠(解决办法：再另外设置BFC)
清除浮动(overflow:hidden触发BFC，子元素可以被父元素计算高度包裹)
BFC可阻止元素被浮动元素覆盖

# 利用BFC多栏布局

围绕
左右互不干扰（添加overflow:hidden使其建立一个BFC,让其内容消除对外界浮动元素的影响。）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			*{margin:0;padding:0}
			.k2{
				width:200px;
				height:200px;
				border:1px solid #00D6B2;
				margin:100px;
				
			}
			.k1{
				/*解除注释会触发BFC,那么margin重叠的bug自动解除*/
				/* overflow: hidden; */
				
				/*测试左右margin没bug*/
				/* display:inline-block */
			}
		</style>
	</head>
	<body>
		<div class="k1">
			<div class="k2"></div>
		</div>
		<div class="k1">
			<div class="k2"></div>
		</div>
	
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			*{margin:0;padding:0}
			.k1{
				width:100px;
				height:100px;
				border:1px solid #00D6B2;
				float:left;
				
			}
			.k2{
				width:200px;
				height:200px;
				background-color: bisque;
				/* overflow: hidden; */
				
			}
		</style>
	</head>
	<body>
		<div class="k1">
			
		</div>
		<div class="k2">
			abc def weq1 abcdef weq1
			abc def weq1 abcdef weq1
			abc def weq1 abcdef weq1
			abc def weq1 abcdef weq1
			abc def weq1 abcdef weq1
			abc def weq1 abcdef weq1
			abc def weq1 abcdef weq1
			abc def weq1 abcdef weq1
			abc def weq1 abcdef weq1
			abc def weq1 abcdef weq1
		</div> 
	
	</body>
</html>

 overflow: hidden;

如果k2的设置overflow:hidden，则不会再k1周围环绕

# BFC清除浮动

利用在父级元素上增加overflow:hidden，形成一个BFC，实现清除浮动的作用

# IFC

内联格式上下文，inline formatting context，如一个p标签中间内容就是IFC.

# GFC

grid formatting context display:grid

# FFC

flex formatting context display:flex/inline-flex

# 关于BFC面试题：为什么第一个子元素设置margin-top父元素会跟着移动

# 问题：

有时当设置子元素的margin-top，但是却发现子元素没有出现上外边距的效果，反而是父元素出现了上外边距的效果。

# 原因：

边距重叠：一个盒子和其子孙的边距重叠。根据规范，一个盒子如果没有上补白和上边框，那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠。

# 解决方案

为父元素设置padding

#father {
    width: 300px;
    height: 300px;
    background: orange;
    padding: 1px;
}
#son {
    width: 100px;
    height: 100px;
    margin: 50px;
    background: red;
}

为父元素设置border

#father {
	width: 300px;
	height: 300px;
	background: orange;
	border: 1px solid #000;
}
#son {
	width: 100px;
	height: 100px;
	margin: 50px;
	background: red;
}

为父元素设置 overflow: hidden

#father {
    width: 300px;
    height: 300px;
    background: orange;
    overflow: hidden;
}
#son {
    width: 100px;
    height: 100px;
    margin: 50px;
    background: red;
}

父级或子元素使用浮动或者绝对定位absolute

#father {
    width: 300px;
    height: 300px;
    background: orange;
    position:absolute;
}
#son {
    width: 100px;
    height: 100px;
    margin: 50px;
    background: red;
}

# BFC和浮动

BFC和浮动

← 移动端css @import&link →