BFC是Block Formatting Context的简称,块级格式化上下文,当标签的display属性是block,list-item, table的时候,盒模型就会参与到BFC这种布局方式中.这种布局方式有一个特点,无论内部子元素怎么变化,都不会影响这个区域外的其他同级元素的布局,最简单的理解就是浮动的元素会被父级计算高度
1.BFC的生成
形成BFC有一下几种情况
- float的值不为none
- position为absolute或者fixed
- display属性对应的值是block,list-item,table
- overflow属性值为auto, scroll, hidden
.main{
width: 300px;
border: 1px solid red;
}
img{
width: 150px;
height: 100px;
float: left;
}
<div class="main">
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" alt="placeholder+image">
<p>道德三皇五帝，功名夏后商周。英雄五伯闹春秋，秦汉兴亡过手。青史几行名姓，北邙无数荒丘。前人田地后人收，说甚龙争虎斗道德三皇五帝，功名夏后商周。英雄五伯闹春秋，秦汉兴亡过手。</p>
</div>
因为给img加了一个float:left.这样main就生成了一个BFC,然后就出现了流体的布局
流体效果
就是p标签因为图片的浮动形成的这样的一个流体布局,它和浮动元素是兄弟关系,如果想让p标签不受浮动的影响,可以给p标签添加一个overflow:hidden,这样p标签自己就成了一个BFC,这样就不受兄弟元素浮动的影响,形成了自适应布局
自适应布局
2.BFC布局规则
- 计算BFC的高度时，浮动元素也参与计算
- BFC的区域不会与float box重叠,形成流体布局
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
- 内部的盒模型会在垂直方向，一个接一个地放置
- 盒模型垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒模型的margin会发生重叠
3.margin问题
如果想给上述自适应布局两部分内容加一个间距有多种方法,比如给右边的p标签加margin-left,但是加完之后会发现加20px都没有效果,左边的图片宽度是150xp,margin-left至少加150px才会有效果,原因也是左边是浮动造成的
这种情况最简单的方法就是在浮动元素加margin-right或者设置padding-right,这两种方式可以直接取得想要的效果
