关于浮动的那些事

理论

浮动，一浮全浮。
浮动的盒子会影响后面的标准流，不影响前面的标准流。
浮动的元素不占位置
例：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y0eAaP3i-1599897883157)(https://i.loli.net/2020/09/03/1lHuFwok94bpWxn.png)]

1不浮动(标准) 2浮动 3标准

       .div2{
         height: 100px;
         width: 100px;
         border: 1px solid red;
		 flaot:left;
       }

结果：
2盒子不影响1，2相当于浮动起来，3盒子就上到了2盒子的位置，被2盒子覆盖

1浮动 2标准 3浮动

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aF7KEBBF-1599897883162)(https://i.loli.net/2020/09/03/nGri5PFLqaQSbIJ.png)]
1盒子浮动起来，影响2盒子，1压着2盒子，3盒子虽然浮动，但是不影响2.
浮动盒子只会影响后面的标准流

为什么要清除浮动

在一些需求下，父盒子不能设置高度。例循环产生一些样式。浮动之后，子盒子就不能撑开父盒子，导致父盒子没有高度。
使用场景：
1：父级无高度
2：子元素浮动
3：影响下面的布局

例：1，2，3浮动
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AaitUiio-1599897883165)(https://i.loli.net/2020/09/03/7eLGsO6FurNwpSB.png)]
这里的父盒子就没有了高度

清除浮动的四种方法

隔墙法

在最后一个子盒子后加上块级元素，为其添加样式

clear：both;

父级元素添加overflow

为父级盒子添加：

overflow:hidden

缺点：超出部分会消失

父级元素添加after：伪元素

clearfix:after{
clear:both;
display:block;
}

缺点：
IE6,7需要添加

clearfix{
*zoom:1;
}

双伪类清除浮动

claerfix:before,clearfx:after{
contnet:"";
display:table;
}
clearfix:after{
clear:both;
}