1元素浮动后对父级的高度有影响，不再撑起父级的高度
浮动前会撑起父元素，就是将父元素的高（父元素不定义宽高的话），如下图，黄色是父元素，红色是子元素，红色撑起黄色
2元素浮动后不自占一行
下图四个颜色的元素均已经浮动，所以在一行里
3元素浮动后可以在父元素的左侧或右侧排列
但是会限制在父元素的最左或最右
如图中代码，红色元素浮动后在父元素范围内
4元素浮动后不会对前面的文档流中的兄弟元素产生影响
独立于前面的，不干涉前面的、先写的元素
下图中，红、蓝、绿都已经浮动，黄色还是父元素，可以见到绿色靠在蓝色右边，而实际上绿还是左浮动，但会靠在最左
5元素浮动后会对后面的文档流中的兄弟元素产生影响，会遮盖其后面的兄弟元素
浮动了会遮住会影响后面
如下图，绿色子元素就撑起黄色父元素，但绿色还未浮动，而蓝色已经浮动，所以蓝色遮住绿色，绿色就是上图4中的大小
6内联元素浮动后，自动变成块级元素
自成一块
如下图粉色，粉色自己跑到绿色右边，接着绿色
7浮动元素仍受父元素影响，还是在父元素的范围内
在父元素的宽，高之内
下图中，绿色变高，但宽没变，粉色在父元素内浮动的话，还是要在父元素宽高范围内，所以只能换行
8当父元素内所有元素均浮动，元素们宽度相加大于父元素宽度时，会换行
在父元素的宽，高之内，宽不够会换行
如图，绿变高了，高的范围占着
9当元素浮动时虽然不自占一行，但会向前占位，前方空值的位置都会属于自己所有，因此后方的元素换行时，不能占据元素向前占位的地域
就是说后面有元素要换行的话，前面的元素也会占据一大块
图中画线部分就是绿元素占据的地方，
10当元素浮动时，原则会盖住其后方在文档流中的兄弟元素。但文字、图片等（行内元素）不会被盖住，其后兄弟元素的文字不会被盖住而是环绕浮动元素的四周显示
如下两图中，半透明蓝色元素遮盖不了文字和锁图片
清除浮动
- 清除浮动并不是去除浮动，?而是将浮动带来的负面效果解决掉。因为浮动会产生?高度坍塌，遮盖
- 浮动影响父元素无?高度
- 父元素无?高度后，?元素的兄弟元素会向上，发?生被遮盖
1给父元素一个高度
.baba {
background-color: blue;
height: 100px;
}
2父元素也浮动，这样就和子元素在同一层了
.fuyuansu {
background-color: blue;
height: 100px;
float: left;
}
3父元素溢出隐藏
.fuyuansu {
background-color: blue;
height: 100px;
float: left;
overflow:hidden:
}
4多创建一个空标签，放在父元素最后，他不能浮动，both可以清除左右两侧的元素浮动后果（影响），弊端是多一个标签
<style>
.baba > .d4 {
width: 100px;
Height: 100px;
clear: both;
float: none;
}
</style>
5用伪元素模拟在父元素最后创建一个空标签，需要改善代码，单独创建一个清除浮动的类做这件事，把这个类给父元素
.baba::after{
content: “”;
display: block;
clear: both;
}