CSS浮动

浮动的目的

如何让多个块元素在同一行显示？
要解决上述问题，我觉大部分人用的最多的就是浮动布局了。

浮动分为左浮动和右浮动：
float:left;
float:right;
清楚浮动方式：
clear:both;

开启浮动后的影响

对兄弟元素的影响

1.A元素开启浮动后 后面的块元素B会上移 如果想保持在原来的位置可以清除浮动对B的影响
2.A元素是块元素没开启浮动 下面的B元素开启浮动后上不去

浮动对父元素的影响

由于自元素开启了浮动 脱离文档流 所以无法撑起父元素高度引起了高度坍塌
解决方案：
 1.设置高度
 2.添加一个空元素然后清除浮动
 3.给父元素设置overflow:hidden
 4.父元素设置成浮动

使用伪元素解决高度塌陷问题：
可以给父元素添加一个class名：clearfix；
.clearfix::after{
            /* 伪元素 必须有content才会显示 */
            content: "";
            /* 默认 伪元素是inline 需要改造成block */
            display: block;
            /* 清除浮动 */
            clear: both;
        }
 或者：
 .clearfix::before{
            content: "";
            clear: both;
        }

若有错误请纠正指出，谢谢！