浮动元素造成的问题及解决方案，这么基础的问题都答不好吗？

前言

元素浮动在平时还蛮经常用到的，关于浮动造成的问题以及解决方法面试时问到的频率也挺高，但是有些小伙伴最近要面试又懒得总结或者总结的不全，下面我总结了一波，希望对你们有所帮助。

浮动造成的问题及解决方法

问题

元素使用浮动或导致父元素高度坍塌；
什么是高度坍塌？
答：父元素的高度，都是有内部的浮动子元素的高度撑起来的，子元素浮动起来，不占用普通文档流，导致父元素的高度失去支撑，从而父元素高度为0或者小于原有的高度；
即使有部分元素留在普通文档流中支撑着父元素，如果浮动元素的高度大于留下的元素，那么浮动元素的高度会超出父元素的边框，用户体验会大打折扣。

解决方法

不好的解决方案：给父元素固定的高度；
缺点：多数情况下，父元素高度由内容撑起，所以很难提前固定父元素的高度；
所以出现了以下的解决方案：
防止父元素高度坍塌一共有以下四种解决方法：

1. 父元素也浮动；
2. 父元素设置overflow:hidden;
3. 给父元素末尾追加一个空子元素（块级元素），并设置clear:both，空子元素清除浮动影响；
4. css为父元素末尾添加伪元素样式并设置clear:both（清除浮动）,高度设置为0，内容设置为空，设置为块级元素（父元素::after{content:‘’;diaplay:‘block’;height:0;clear:‘both’}）（4个里最完美的解决方案哦）。

分析一波

第一种方法：缺点：父元素浮动，会产生新的浮动影响；虽说可以解决高度坍塌问题，但是，这会改变父元素本身状态，整体会失去文档流，失去占位，所以后面的其他平级元素就会上移，被父元素挡住了，后面的元素可以设置clear:both,清除所有的浮动，但是总归还是感觉不太好，因为有些麻烦，影响他人了，自身状态也变了。
第二种方法缺点：父元素设置了overflow:hidden，但是里面的有的子元素在某种情况下不想隐藏肿么办？比如：

第三种方法：
给父元素末尾追加一个空子元素（块级元素），并设置clear:both，空子元素清除浮动影响；
原理：利用clear:both属性和父元素必须包含非浮动元素两个原理；
缺点：无端多出个无意义，看不见的元素，影响选择器和查找元素；
第四种方法：
css为父元素末尾添加伪元素样式并设置clear:both（清除浮动）,高度设置为0，内容设置为空，设置为块级元素；
优点：既不会影响显示影藏，又不会影响查找元素，又不会产生新的浮动问题，完美解决以上三种方法的问题；