Css浮动篇

何为浮动？
我个人的理解就是让要浮动的东西“飘起来”
言归正传，
一、 浮动定位
浮动后的元素具有怎样的特性；
1、当一个元素浮动后，该元素一定会成为块盒（block）
2、浮动元素 会被排除在文档流之外也称“脱离文档流”，不占据页面空间。
3、浮动元素会停靠在父元素的左边或右边，或平级的其他已浮动元素的边缘上，但不会超过上一级的底部。
二、属性
float
取值：
1、none
默认值，无浮动
2、left
左浮动，让元素停靠在父元素的左边，或紧挨着左侧已有的浮动元素
3、right
右浮动，让元素停靠在父元素的右边，或紧挨着右侧已有的浮动元素
右浮动，让元素停靠在父元素的右边，或紧挨着右侧已有的浮动元素
三、清除浮动
属性：clear
取值：1、none
默认值，不做任何清除操作
2、left
清除该元素左边(上边)的浮动元素所带来的影响
3、right
清除该元素右边的浮动元素所带来的影响
4、both
清除该元素两边的浮动元素所带来的影响
7、浮动元素对父元素所带来的影响
由于浮动元素脱离文档流，所以不占据父元素空间。如果一个元素中所有的子元素全部都浮动了的话，那么该元素的高度将变成0
解决方案：
1、直接给父元素设置高度
2、设置父元素也浮动
3、为父元素设置 overflow ：hidden属性
弊端：如果有内容要以溢出的方式显示的话，也一同被隐藏了。
4、在父元素中，追加空子级块级元素，并设置其clear属性值为 both
清除浮动的方法：
示例

 <style>
        box::after{
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }
 </style>