Fork me on GitHub

李可

导航

CSS2系列：BFC(块级格式化上下文)IFC(行级格式化上下文)

BFC

块级格式化上下文，不好理解，我们暂且把她理解成“具有特殊的一类元素”

哪些元素会生成BFC?

  • 根元素
  • float属性不为none
  • position为absolute或fixed
  • display为inline-block, table-cell, table-caption, flex, inline-flex
  • overflow不为visible

代码注释很重要

<html>
<head>
	<title></title>
	<style type="text/css">
		.container {
			/*overflow: hidden;*/
			 /*display:flex ;*/
		height: 27px;
		/*这个做法高度设置之后，虽然可以达到“包裹的目的”，但是不是真正的包裹，要不你就试一试设置height和盒子的height不同值试一试*/
	/**以上达到了高度自适应的目的，包含体元素宽度依然是块元素的宽度，占据一行的宽度*/
		    	 background-color: green;
	/*以下达到了高度自适应的目的，包含体元素宽度却只有包裹盒子的宽度*/
		    	/*float: left;*/                      
		    	/*position: absolute ;*/
		    	/*position: fixed; */
		    	 /* display:inline-flex;*/
			/* display:table-cell;*/	
			/*display:inline-block;*/
 	/*以下达到了高度自适应的目的，包含体元素宽度却只有包裹盒子的宽度，盒子不是水平方向排列，而是垂直方向*/
			/*display:table-caption;*/
		}
		
		.container div {
			 float: left;
			 background-color: red;
			 margin: 20px;
		}
	</style>
</head>
<body>
<div class="container clearfix">
    <div>Sibling</div>
    <div>Sibling</div>
</div>
</body>
</html>

posted on 2016-03-25 11:05  李可在江湖  阅读(464)  评论(0)  编辑  收藏  举报