前端学习笔记06---BFC与清除浮动

BFC：块级格式化上下文。解释就是当一个元素是BFC类型的时候，它会表现得像一个块级元素一般，并且其中的元素与外界隔绝。

能形成BFC的方法：

1、float的值不为none，就是让它浮动起来。

2、overflow值不为visible。溢出时使它不要显示。

3.display的值为inline-block、table-cell、table-caption。

4.position的值为absolute或fixed。

BFC的作用：

1、撑开父级元素

2、清除浮动（合并浮动），防止高度坍塌

3、防止外边距合并

 

借鉴： https://www.zhihu.com/question/19915431

1、清除浮动和闭合浮动：

清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；

闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。

 

2、浮动是什么？为什么要清除浮动？

浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到 块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会 自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。

正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。

 

3、清除浮动的方法？

具体看借鉴的链接。

总的来说就两类：

其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；

其二，通过设置父元素 overflow 或者display：table 属性来闭合浮动，我们来探讨一下这里面的原理。

 

所以清除浮动在支持BFC的浏览器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动（父级改为BFC就行）；

在不支持 BFC的浏览器 （IE6-7），通过触发 hasLayout 闭合浮动（加一个.clearflex的元素呗）。