CSS中浮动的特点、高度塌陷和BFC以及高度塌陷的解决方法

一、浮动及浮动的特点

通过浮动 可以使一个元素向其父元素的左侧或者右侧移动
使用float属性设置元素的浮动
可选值：
none默认值 元素不浮动
left元素向左浮动
right 元素向右浮动
元素设置浮动以后，水平布局等式便不需要强制成立
元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，
所以元素下边的还在文档流中的元素会自动向上移动

浮动的特点：

1. 浮动元素会完全脱离文档流，他不在占据文档流的位置
2. 设置浮动以后 元素会向父元素的左侧或右侧移动
3. 浮动元素默认不会从父元素中移出
4. 浮动元素向左或向右移动时，不会超过它前面的其他浮动元素
5. 浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
6. 浮动元素不会超过它上边的浮动的兄弟元素 最多就和它一样高
7. 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围
   所以我们可以利用浮动设置文字环绕图片的效果
8. 元素设置浮动以后将会从文档流中脱离

脱离文档流特点：
块元素：
1. 块元素不在独占页面一行
2. 脱离文档流以后，块元素宽度和高度默认都被内容撑开
行内元素：
1. 行内元素脱离文档流会变成块元素 特点和块元素一样
脱离文档流以后，不需要再区分块和行内了

浮动主要作用：让页面中的元素可以水平排列 通过浮动可以制作水平方向布局

二、高度塌陷和BFC

高度塌陷问题：

在浮动布局中，父元素的高度默认是被子元素撑开的
当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离
将会无法撑起父元素的高度，导致父元素的高度丢失
父元素高度丢失后其下的元素会自动上移，导致布局混乱
高度塌陷是浮动布局中比较常见的问题，这个问题必须处理。
高度塌陷的产生条件：
子元素浮动，脱离文档流
子元素绝对定位或固定定位，脱离文档流

BFC(Block Formatting Context)块级格式化环境：

BFC是CSS中隐含的属性 可以为一个元素开启BFC
开启BFC后该元素会变成一个独立的布局区域

元素开启BFC后的特点：
1. 开启BFC的元素不会被浮动元素所覆盖
2. 开启BFC的元素 子元素和父元素的外边距不会重叠
3. 开启BFC的元素 可以包含浮动的子元素
可以通过一些特殊方式来开启元素的BFC：
1. 设置元素的浮动(不推荐)
2. 将元素设置为行内块元素(不推荐)
3. 将元素的overflow设置一个非visable的值
常用的方式 为元素设置overflow：hidden开启BFC 使其包含浮动元素

三、高度塌陷最终解决方法

方案一：给父元素一个固定的高度

缺点：给父元素固定高度违背了高度自适应的原则，不够灵活，不推荐使用。

方案二：给父元素添加属性 overflow: hidden;

优点：浏览器支持好，简单；
缺点：当子元素有定位属性时，设置 overflow: hidden; 容器以外的部分会被裁剪掉。

方案三：在子元素的末尾添加一个空的 div ，并设置下方样式

div{
clear: both;
height: 0;
overflow: hidden;
}

优点：所有浏览器都支持，并且容器溢出不会被裁剪；
缺点：在页面中添加无意义的div，容易造成代码冗余。

方案四：万能清除浮动法

此方法只能消除float带来的高度塌陷，无法消除position：absolute带来的高度塌陷

		.box1::after{
            /* after默认为行内元素 需要转换为块元素 */
            display: block;
            content: '';
            clear: both;
        }

通过向父元素最后添加一个块元素然后通过clear来清除其他元素浮动对添加元素的影响
就可以让父元素的高度被撑开。

如果不希望某个元素因为其他元素浮动改变位置，
可以通过clear属性来清除浮动元素对当前元素所产生的影响

clear：

• 作用：清除浮动元素对当前元素产生的影响
• 可选值：
  left 清除左侧浮动元素对当前元素的影响
  right 清除右侧浮动元素对当前元素的影响
  both 清除两侧中最大影响的那侧

原理：
设置清除浮动后，浏览器自动为元素添加一个上外边距，使其不受其他元素影响