BFC(Block formatting Context) 块级格式化上下文,布局规则如下:
1.内部的盒子会在垂直方向,一个一个地放置;
2.盒子垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的上下margin会发生重叠;
3.每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此;
4.BFC的区域不会与float重叠;
5.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也是如此;
6.计算BFC的高度时,浮动元素也参与计算。
怎样会触发BFC?
1.根元素;
2.float的属性部位none;
3.position为absolute或fixed;
4.display为inline-block,table-cell,table-caption,flex;
5.overflow不为visible
<h1>第一组</h1>
<div class="aside"></div>
<div class="main"></div>
.aside{
width:100px;
height:150px;
background:black;
float:left;
}
.main{
width:300px;
height:200px;
background:yellow;
}
效果
符合布局规则的第三条:每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此。
如果要黑色部分把黄色部分撑到一边,则按照第四条,需要创造BFC,则在黄色部分加入overflow:hidden;来触发。
.aside{
width:100px;
height:150px;
background:black;
float:left;
}
.main{
width:300px;
height:200px;
background:yellow;
overflow: hidden; /*BFC的区域不会与float重叠。 overflow:hidden;触发BFC*/
}
效果
第二组 清除浮动
<h1>第二组 清除浮动</h1>
<div class="parent">
<div class="child"></div>
</div>
.parent{
width:300px;
border:1px solid black;
}
.child{
width:100px;
height:150px;
background:yellow;
float:left;
}
效果
我们看到黄色部分没有撑开父元素,那么按照第六条:计算BFC的高度时,浮动元素也参与计算。
应该让父元素触发BFC,则加上overflow:hidden;
第三组 margin重叠
根据第二条:盒子垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的上下margin会发生重叠;代码如下:
<h1>第三组 margin重叠</h1>
<div class="box"></div>
<div class="box"></div>
.box{
width:300px;
height:100px;
background:yellow;
margin:50px 0;
}
同一个BFC下,上下的margin重叠了,那么怎么能不重叠呢,就是不在同一个BFC下呗,给第二个box加一个父级,再让父级触发BFC就可以了。
<h1>第三组 margin重叠</h1>
<div class="box"></div>
<div class="wrap"> <!-- 加一个父级,使两个.wrap不在同一个BFC下-->
<div class="box"></div>
</div>
.box{
width:300px;
height:100px;
background:yellow;
margin:50px 0;
}
.wrap{
overflow: hidden;
}
这样上下margin不重叠了