float布局：高度塌陷以及解决办法

Well，利用float浮动来实现多个块元素横向布局已经是习以为常的事情了，同时我相信许多刚刚接触float元素或者甚至刚刚才入行的小伙伴们会遇到一系列的问题。

例如这样：（这孩子真霸道）

再比如这样：（坑爹！这是要闹哪样！）

其实类似问题的解决方法在网上一大堆，俗话说：有事没事找度娘！

这里我只是简单的总结一下而已，毕竟鄙人也是一枚刚跳进前端的伪小白，同时算是给一些前端新人一种比较简单的理解。

首先，简单解释一下float是什么鬼，float英文翻译是浮动的意思，而在html里面是三种定位机制的其中一种（文档流、浮动、绝对定位），

在一般情况下，浏览器默认的时文档流（有的似乎叫普通流，不管了，大家明白就好）的定位机制。文档流，通俗来说就是块元素像军训那样一列从上到下排列下来。

而float呢，则像搞事的那样脱离队列，也就是脱离文档流。这是图一box4应该的效果：

而实际却是被上面三个box2的浮动逼成了这个样子

而这是因为box2（灰色那个box）的浮动。同时图二的高度塌陷也是同样的问题，由next box区域因上方三个boxfloat浮动的原因而导致曲线框的高度塌陷。

解决办法：据我所了解有三种比较简单的方法

1.在父元素style内或者在浮动元素下方添加div 适用css clear:both

2.在父元素内使用overflow:auto

3.在父元素内使用overflow:hidden

当然，不止这三种方法，这是我所了解而且感觉最容易的三种。

同时，这三种也是有缺点的。

1.使用这种方法会导致许多无用标签的产生

2.overflow：auto，如果超出范围会自动生成一个滚动条，当然如果这滚动条并不妨碍你的思路，那也是无所谓的

3.hidden会导致超出部分直接隐藏且不占据文档流的位置。

这个只是一个个人比较通俗的讲法，如果想具体理论化的理解请去大牛们的博客。我只是渣

以上就是我自身对于float浮动的一些理解，如果有什么不对，或者还有什么更好的方法，欢迎各位大牛指出，让我这伪小白能学到更多。同时也希望看了这篇文章的读者，能对你们有所帮助。