【 总结 】BFC

BFC

块级格式化上下文 指一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局
一个父级盒子不设置height 当内容子元素都浮动时 无法撑起高度

如何创建BFC

• float 不能是none
• position 不能是static或者relative
• display : inline-block || flex || inline-flex
• overflow : hidden || auto

作用

• 解决盒子高度塌陷的问题
• 阻止元素被浮动元素覆盖

float

	<div class="father">
		<div class="son"></div>
		<div class="son"></div>
		<div class="son"></div>
	</div>
    
    <style type="text/css">
    	*{
    		margin: 0;
    		padding: 0;
    	}
    	.father{
    		width: 100%;
    		background-color: #000;
    		/******************/
    		float: left
    		/******************/
    	}
    	.son{
    		width: 200px;
    		height: 200px;
    		background-color: red;
    	    float: left;
    	}
    </style>

position

	<div class="father">
		<div class="son"></div>
		<div class="son"></div>
		<div class="son"></div>
	</div>
    
    <style type="text/css">
    	*{
    		margin: 0;
    		padding: 0;
    	}
    	.father{
    		width: 100%;
    		background-color: #000;
    		/******************/
    		position: absolute;
    		/******************/
    	}
    	.son{
    		width: 200px;
    		height: 200px;
    		background-color: red;
    	    float: left;
    	}
    </style>

display

	<div class="father">
		<div class="son"></div>
		<div class="son"></div>
		<div class="son"></div>
	</div>
    
    <style type="text/css">
    	*{
    		margin: 0;
    		padding: 0;
    	}
    	.father{
    		width: 100%;
    		background-color: #000;
    		/******************/
    		display: inline-block;
    		/******************/
    	}
    	.son{
    		width: 200px;
    		height: 200px;
    		background-color: red;
    	    float: left;
    	}
    </style>

overflow

	<div class="father">
		<div class="son"></div>
		<div class="son"></div>
		<div class="son"></div>
	</div>
    
    <style type="text/css">
    	*{
    		margin: 0;
    		padding: 0;
    	}
    	.father{
    		width: 100%;
    		background-color: #000;
    		/******************/
    		overflow: hidden;
    		/******************/
    	}
    	.son{
    		width: 200px;
    		height: 200px;
    		background-color: red;
    	    float: left;
    	}
    </style>