css基础-浮动篇

1.浮动的理解：设置浮动的元素会飘着文档流的上方，它的兄弟元素会占据它的位置，但是它的兄弟认为浮动元素有内容的，兄弟元素的内容会覆盖
https://blog.csdn.net/qq_40421277/article/details/79687268

2.不管元素是什么类型的，浮动之后都是块级元素，

3.浮动元素的左或右边界不可能超过容器的左或右边界

4.浮动元素避免重叠=>如果前面元素a是向左浮动的话，后面元素b的顶部只能从a的底部开始或者b的左边框只能从a的右边框开始。
如果前面元素c是向右浮动的话，后面元素d的右边框只能从c的左边框开始或者d的顶边只能从c的底边开始。

5.左浮动元素的右边界不能在右浮动元素左边框的右侧，
右浮动元素的左边界不能在左浮动元素右边框的左侧

6.当父类元素空间不够大的时候，就会高度坍塌。

https://www.cnblogs.com/huancheng/p/9558650.html
浮动带来的高度坍塌影响：父级背景，边框，margin，padding不能正常显示

7.浮动高度坍塌：子元素撑破了父元素，父元素无法包裹子元素的内容
eg:因为子元素设置了float，没有内容使得父级元素撑开。

解决方法：
1.给父级元素设置高度，
2.父级浮动（影响其他的布局）,
3.给父级元素加overflow：hidden（overflow:hidden让子元素紧靠父级元素里面从而清除了浮动,弊端有些内容被隐藏了）
4.在最后加一个空的子元素，并让他clear:both；
5.设置父级元素 display: inline-block;(margin：0 auto会失效)
6.给父类加伪类：
.parent::after {
content:"";
display: block;
clear:both;
visibility: hidden;
}
7.父元素：创建BFC