CSS的浮动

css将页面分成很多个层级，肉眼看见的是最顶层，最底层称为文档流层，所有元素默认在文档流层。

一、浮动的好处

父元素的高度不需要设置具体值，而是由子元素撑开的，不会因为子元素的内容减少出现大两的空白区域，也不会因为子元素的内容过多出现大量的空白区域

浮动的特点：

1.脱离文档流之后不需要区分块和行内元素

2.浮动元素不会盖住文字

3.浮动元素会完全脱离文档流，不再占用文档流中的位置，下面未设置浮动的元素自动上来

4.浮动元素默认不会从父元素中移出

5.如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移 如下图所示

6、浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高

二 、浮动带来的高度坍塌问题

当子元素设置浮动，会脱离文档流，但父元素还在文档流中，由于父元素是被子元素的欸容撑开的，会导致父元素的高度丢失，其下面的元素会自动上移，导致页面布局混乱

高度坍塌的解决办法（4种）

1.给父元素设置高度（不可取）

     给父元素固定高度违背了高度自适应的原则，不够灵活，当不知道父元素的具体高度时没办法设置，不推荐使用

2.给父元素添加属性： overflow：hidden 引出BFC

BFC的定义：就是给盒子增加一个属性，让盒子变成一块独立渲染的区域，可以理解为一个箱子，箱子里面的物品摆放是不受外界应影响的

3. 在最后一个浮动的元素后面添加一个空的div给该元素添加属性

 在也页面中添加没有意义的div，形成冗余代码。

4.万能清除浮动法

在父元素中内容的最后添加一个伪元素来实现
         
父元素选择符::after{
content:"";
display:block;
clear:both;
}

5.同时解决高度坍塌和外边距重叠

.clearfix{
    content:"";
    display: table;
    clear: both;
}