前端之旅HTML与CSS篇之清除浮动塌陷

以下内容为转载。

方法1：给浮动的元素的上级添加高度
如果一个元素要浮动，那么它的祖先元素一定要有高度。高度的盒子，才能关住浮动。
只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。
所以只需要给li的上级ul或者div设置一个height：40px；（只要是浮动元素的上级元素就可以。），那么第二个div就好挤下来，在第一个盒子下面显示出来。
方法2：clear:both;
但是在实际开发过程当中中，高度height很少出现。为什么？因为能被内容撑高！那也就是说，刚才我们讲解的方法1，工作中用的很少。
那么这里有人可会脑洞大开：能不能不写height，也把浮动清除了呢？也让浮动之间，互不影响呢？
事实上的确有这样的解决方法，是给他的上级添加一个clear：both；首先Clear就是清除的意思，both，代表左浮动和右浮动都清除掉。通俗一点来讲，就是说清除别人对我的影响。
虽然说这样可以清除浮动塌陷现象，但是同样也会有一个致命的问题。那就是两个div之间，margin值失效了，无法设置。再重申一下，是指两个div之间。
方法3：隔墙法
既然用clear：both会导致两个div之间margin失效，那么到后面有人又开始脑洞大开了。在中间一个空盒子，然后给那个空盒子clear：both；
这样加了一堵墙之后，第二个div就能掉下来并且不干扰了上面的元素。而且第二个div还是能通过magin-top调节两个div（“墙体”div不要算进去）之间的间距，所以隔墙法作为一个新的套路沿传开来。
方法4：隔墙法进化版—内墙法
只是将墙体的位置改变了，就完美的解决第一个div不能通过margin-bottm来调节与下面div之间的间距。
所以后面很长一段时间，“内墙法”成为各大公司清除浮动主流写法。
方法5：overflow：hidden；
overflow:hidden;溢出盒子边框的内容，隐藏了。
这个样式本意就是清除溢出到盒子外面的文字。
所以这个overflow：hidden；也算是一个“祖传老偏方”，能治浮动塌陷老毛病。当然既然是“偏方”，肯定就有因为有些特殊情况下不能解决。导致只是沦为“偏方”上不正统。
特殊情况就是定位的时候，若定位的区域超出那个盒子，overflow：hidden；就会把多的部分裁切掉。所以除了这个老毛病，overflow：hidden；其简单粗暴的写法，还是有与“内墙法”一争正室能力。