浮动、高度塌陷、以及其解决办法

 1.什么是浮动？

浮动(float)：

1. 依然位于父元素内，无法撑出处于标准文档流的父盒子的height
2. 脱离文档流，形成BFC，但不脱离文本流。即float元素下面的文字依然会被挤出去。
3. 变为块级元素 — 块级元素：允许修改尺寸 。行内元素：不允许修改尺寸
4. 父级元素内的文本，行内，行内块元素采用环绕方式排列

★ BFC：
一、何为BFC

BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

二、形成BFC的条件

1. 浮动元素，float 除 none 以外的值；
2. 定位元素，position（absolute，fixed）；
3. display 为以下其中之一的值 inline-block，table-cell，table-caption；
4. overflow 除了 visible 以外的值（hidden，auto，scroll）；

三、BFC布局规则：

1、内部的Box会在垂直方向，一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3、每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4、BFC的区域不会与float box重叠。
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6、计算BFC的高度时，浮动元素也参与计算

 什么是高度塌陷？

如果父元素包含的子元素脱离了文档流，并且它本身没有设置高度，那么父元素的高度就会变成零

 2.浮动 之后会有什么样的影响？ (高度塌陷)**

由于浮动元素会脱离文档流，所以导致不占据页面空间，所以会对父元素高度带来一定影响。如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成0（高度塌陷）

 3.如何清楚浮动？

#方案1
直接设置父元素的高度 、
优势：极其简单
弊端：只适合高度固定的布局，必须要给出精确的高度。如果用在在响应式布局会有很大影响。
原理：如果父级元素没有定义高度，父元素的高度完全由子元素撑开时，父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

#方案2
设置父元素浮动
原理：它们就成为了一个整体
优势：简单，代码量少，没有结构和语义化问题
弊端：对后续元素会有影响

#方案3
在父元素上使用伪元素after，并设置其clear属性为both

优点：代码量少 容易掌握 简单易懂
建议：推荐使用，建议定义公共类，以减少CSS代码。

#方案4
为父元素设置overflow属性 ，取值：hidden 或 auto
优点：简单，代码量少
缺点：如果有内容要溢出显示(弹出菜单)，也会被一同隐藏
原理：设置overflow：hidden后，它本身会触发形成BFC，为了不影响外部元素的布局，BFC计算高度时会包括浮动元素的高度。
（BFC布局规则第六条：计算BFC的高度时，浮动元素的高度也参与计算。 ）

#方案5
追加空标签（在浮动元素结束的地方，父元素内）

<div style="clear:both;height:0;"></div>

优点：浏览器兼容性特别好，不容易问题
弊端：会添加许多无意义的空标签，有违结构与表现的分离，不便于后期的维护