css布局之浮动（float）

浮动最开始只是单纯的为了实现文字环绕现象，而随着技术的发展，就有人提出了一个想法，以至于现在可以实现网页中盒子的多列排版布局，比如一栏布局，两栏布局，多栏布局。

浮动通俗易懂的来说就是让添加了浮动属性的元素漂浮起来，也可以认为使他脱离了标准文档流上移了一层，当我们只设置浮动属性时浮动的元素会互相贴靠，并且每个浮动的元素都具有收缩现象。

因为浮动的元素脱离了我们的标准文档留，所以我们的父级元素的高度或者宽度就不会被子元素（浮动的元素）撑起来。就造成了高度塌陷！

解决破坏性/清楚浮动：

给父盒子设定一个高度！（使用不灵活,后期不易维护）一般应用在网页盒子固定高度区域，比如固定的导航栏
内墙法：在最后一个浮动元素后面新填一个空的块级元素并设定他的元素clear:both; 清楚浮动造成的影响。（结构冗余！如果每一个浮动元素都需要加的话就会冗余）
伪元素(选择器)清楚法

 .clearfix::after{
     content:''; //添加元素的内容
     display:block; //添加的元素设为块级元素
     clear:both; // 清除浮动！
 }

overflow:hidden （visible超出部分可见，hidden超出部分隐藏,scroll滚动条,auto基本上和scroll一样，inherit继承父级），使用这个属性会形成BFC (Block Formtting Context)计算BFC高度的时候浮动元素也参与计算！那么形成BFC的条件，除了overflow:visitable 都能形成BFC

（1）B：BOX 即盒子，页面的基本构成元素。分为inline、block和inline-block三种类型的BOX

（2）FC：Formatting Context是W3C的规范中的一种概念，他是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

常见的Formatting Context 有 Block formatting context (简称BFC) 和 Inline formatting context (简称IFC)

BFC定义

直译为"块级格式化上下文"。他是一个独立的渲染区域，只有Block-level box参与，他规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干

BFC布局规则：

哪些元素会生成BFC

css之浮动