简介

全称：块级格式化上下文

• 是网页的一个独立渲染区域
• 这个渲染区域只有块级元素才能参与
• 规定了内部块级元素如何布局
• 内部布局与外部无关
• 区域里面的子元素不会影响外面的元素，外面的元素也不会影响区域里面的子元素

块级元素渲染区域内以BFC的方式渲染
垂直方向的BFC的margin会合并

形成BFC的方法

• float不是none
• position不是static或relative
• display是inline-block、table-cell、flex、table-caption、inline-flex
• overflow不是visible

解决问题

避免垂直方向margin合并

方案一

1. 用一个块级元素包裹下方元素
2. 设置这个块级元素overflow:hidden 缺点：超出的元素部分会被隐藏

方案二

使用伪元素

父元素::before{
    content:'',
    display:table,
    height:0//解决老版浏览器display:table属性高度可能不能为0
}

优点：不影响显示隐藏、不会添加新元素、不影响高度

避免垂直方向margin益处

子元素设置margin-top，会超出父元素上面的范围，变成父元素的margin-top

方案一

设置父元素overflow:hidden
缺点：超出的元素会被隐藏

方案二

为父元素添加边框，设置颜色透明
边框本身可以阻挡margin溢出
缺点：会增加元素的实际大小

方案三

用父元素的margin-top代替子元素的marign-top
缺点：对父元素高度影响，可以设置父元素box-sizing:border-box解决

方案四

在父元素内第一个子元素之前添加一个空的<table></table>
优点：空table没有大小
缺点：添加了一个空元素table，干扰查找元素

方案五

伪类选择器

父元素::before{
    content:'',
    display:table,
    height:0//解决老版浏览器display:table属性高度可能不能为0
}

优点：不影响显示隐藏、不会添加新元素、不影响高度

左定宽，右自适应布局

方案一

1. 左边定宽左元素浮动，给固定宽度
2. 右边元素设置overflow:hidden

方案二

1. 父元素display:flex
2. 左边元素给宽度
3. 右边元素flex:1