<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
width: 100px;
height: 30px;
font-size: 20px;
background-color: red;
margin-bottom: 20px;
}
.p2{
width: 100px;
font-size: 20px;
height: 30px;
background-color: yellow;
margin-top: 50px;
}
.d1{
width: 1000px;
height: 600px;
border: 1px solid gray;
margin: 0 auto;
}
.d2{
width: 200px;
height: 500px;
background-color: red;
float: left;
}
.d3{
width: 500px;
height: 500px;
background-color: yellow;
float: right;
}
.d4{
/*width: 600px;*/
height: 600px;
background-color: green;
overflow: hidden;
/*display: inline-block;*/
}
</style>
</head>
<body>
<!--
BFC(Block Formatting Context)"块级格式化上下文"
它是页面里的任意一块独立的渲染区域，只有Block-level box参与。
在BFC内部有一定的排布规则，且这个区域与外部毫不相干。
概念1：Box 页面布局的基本单位，一个页面有多个box组成，元素的默认类型和display样式，最终决定了这个box的类型。不同的box类型会参与不同的Fromatting Context.
概念2：Formatting Context:这是css2.1提出的概念，是页面中的一块渲染区域，不同类型的元素会形成不同的渲染区域，其内部渲染规则不同，它决定了其内部子元素如何排列，
以及和其他元素之间的关系和相互作用，最常见的Formatting Context有两种：BFC（Block Formatting Context）和IFC（inline Formatting Context）
BFC的布局规则
1.内部的行box（一行里所有行元素的组合）和块box全部会在垂直方向上，一个一个的放置
2.box垂直方向上的距离有margin决定，属于同一个BFC的两个相邻的box的margin会发生融合
3.每个盒子的margin的左边缘，与其父元素的左边缘相接触（如果发生了从右向左的格式化，效果相反），此条对于浮动元素依然适用。
4.BFC区域不会与float box重叠。
5.BFC区域是页面时一个独立的渲染区域，容器里的子元素不会影响外部元素，反之亦然。
6.计算一个BFC容器的高度时，浮动元素也会参与计算。
如何创建一个BFC
1.float的值不是none.
2.position的值不是static或者relative
3.display的值时inline-block，table-cell,flex,table-caption或者inline-flex
4.overflow的值不是visible。
-->
<!--<div class="p1"></div>
<div class="p2"></div>-->
<div class="d1">
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
</div>
</body>
</html>
浙公网安备 33010602011771号