BFC机制关联浮动与脱离标准流

脱离标准流的方式 1:浮动2:绝对定位3:固定定位, 脱离标准流之后定位的元素,会覆盖浮动的元素, 故此定位的比浮动的脱标等级高. 且在清除脱标带来的影响中,浮动的元素,可以被除浮动的方式来解决对父盒子的影响. 脱标定位的元素,给父盒子造成的影响无法清除.

BFC block formatting content 块格式化上下文 是w3c规定的一种独立渲染区域


其特性为


1. BFC 会阻止外边距折叠
2. BFC 可以承载浮动的元素
3. BFC 可以阻止元素被浮动元素覆盖


那些情况会触发BFC
float 除了none以外的值
overflow 除了visible 以外的值（hidden，auto，scroll）
display (table-cell，table-caption，inline-block)
position（absolute，fixed）根元素

1.1. 三个已经混淆的概念

 不浮动float:none;

 清除周围的浮动元素

 清除子元素浮动对父元素的影响

1.2. 什么是清除浮动

清除浮动不是把当前标签的浮动给清楚了，如果这样，还加浮动做什么

其实清除浮动指的是清楚当前元素旁边的浮动元素，但是当前元素又不能影响别人，打不赢就跑，所以自己就跑到下面去了。

1.3. 为什么要清楚浮动

在布局的时候我们经常希望某些内容能够水平排布，水平排布后，由于内部内容不确定，高度不能简单的给一个定值。而如果不给高度，子元素又都浮动了，父盒子就会因为没有子盒子的支撑而塌陷。

利用清除浮动的这个特性，我们可以给父元素中最后一个不浮动的盒子使用clear:both从而把父盒子的高度撑起来，并且能够根据内部内容的变化而改变高度。

1.4. 清楚浮动的方法

1.4.1. 额外标签法

原理：单独使用一个标签加上clear:both跑到浮动元素下面，从而消除子盒子浮动造成的父盒子塌陷。

典型网站：某电商网站

优点：通俗易懂，容易掌握

缺点：添加很多无意义的空标签，不符合结构与表现分离的原则，不利于后期维护

1.4.2. 父元素设置overflow：hidden

原理：让父盒子形成BFC，BFC的特性之一就是可以承载浮动元素

优点：不存在结构和语义化问题，代码量极少

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素