BFC和清除浮动 | 易学教程

BFC：

特性

块级格式化上下文会阻止外边距叠加
当两个相邻的块框在同一个块级格式化上下文中时，它们之间垂直方向的外边距会发生叠加。换句话说，如果这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加。
块级格式化上下文不会重叠浮动元素
根据规定，一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元素的外边距叠加。由于这个原因，当给一个挨着浮动的块级格式化上下文添加负的外边距时将会不起作用。
块级格式化上下文通常可以包含浮动

通俗地来说：创建了BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，反之亦然，同时BFC任然属于文档中的普通流。

触发条件：

<html>根元素
float 除了none以外的值
overflow 除了visible 以外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block)
position（absolute，fixed）
fieldset元素（实验中，不建议使用）

建议采取的BFC特性

.lbf-content {
    overflow: hidden;
    }

.lbf-content {
    display: table-cell; 
    width: 9999px;
}

第二种会让连续英文字符换行，解决方法：

.word-break {
    display: table;
    width: 100%;
    table-layout: fixed;
    word-break: break-all;
}浮动的缺点：

无法撑起父元素。
同级别的兄弟元素会围绕在周围。

清除浮动常用的几种方式：简单看看如何形成BFC：（1）float值不为none，可以是left，right或both（2）overflow为hidden或auto或scroll（3）display为inline-block或table-cell或table-caption（4）position为absolute或fixed我们可以对父容器添加这些属性使其变成BFC，从而达到“清浮动”效果

1、父级div定义伪类：after和zoom

.clearfloat:after{display:block;clear:both;content:"";}

.clearfloat{zoom:1}

2.在结尾处添加空div标签clear:both

添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

3.父级div定义height

父级div手动定义height，就解决了父级div无法自动获取到高度的问题；不推荐使用，只建议高度固定的布局时使用

4.父级div定义overflow:hidden

只推荐没有使用position或对overflow:hidden理解比较深的朋友使用

来源：https://www.cnblogs.com/jeffjoy/p/9382903.html

标签

bfc

overflow