【总结】BFC

最新推荐文章于 2024-10-02 15:35:50 发布

zwj、

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量116

点赞数

文章标签： css3 css

本文链接：https://blog.csdn.net/Twisted_/article/details/121125240

版权

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>