BFC

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,这两种方式可以直接取得想要的效果