首页 > 代码库 > 前端之旅HTML与CSS篇之清除浮动塌陷

前端之旅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;其简单粗暴的写法,还是有与“内墙法”一争正室能力。

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