从标签到BFC

1、标签：

双：由开始，结束标签组成<p></p>

单：<br/>

2、元素：

由标签+内容组成

3、Box：

在CSS中布局的基本单位是Box,Box包围着元素.

4、BFC

BFC(Block formatting context)块级格式化上下文。

BFC是一个独立的块级渲染区域，它规定了内部的布局方式，与外部环境无关。

4.1、触发条件：凡脱离文档流都可以产生BFC

1、浮动元素：float属性不为none；(left/right/inherit)

2、绝对定位的元素，position为absolute或fixed；

3、display为inline-block,flex,inline-flex,grid,inline-grid;

4、overflow值不为visible的块元素；(hidden隐藏内容/scroll滚动条显示/auto/inherit)

完整方法

4.2、实例

1、当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷。

解决方案：清除浮动

a、在浮动元素后面添加新的元素，设置clear属性；

b、使用伪元素(：after)，添加clear属性；

	.clearfix:after{
	content: "060"; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;  
	}

c、给父元素设置overflow属性,浮动元素回到父元素把高度撑起；使得外层元素产生了一个BFC，BFC的高度计算包含其内部的浮动元素，从而达到清除浮动效果。

d、给父元素设置浮动属性；

2、外边距垂直方向重合

给其中一个元素加上父元素，使父元素触发BFC将内部元素与外部元素隔离。

3、两栏布局

a、左侧设置浮动，右侧设置margin-left：左侧width大小；

	.left {
	float: left;
	color: white;
	width: 200px;
	height: 200px;
	background: #000;
	}
	.right {
	overflow: hidden;
	margin-left: 220px;
	background: pink;
	height: 100px;
	}

b、左侧设置position：absolute;

	.left {
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	height: 100px;
	}
	.right{
	margin-left: 100px;
	height: 100px;
	}