清除浮动的几大方法

Posted 2020-11-02 xinyuan657797068

 对于刚接触到html的一些人经常会用到浮动布局，但对于浮动的使用和清除浮动来说是大为头痛的，在这里介绍几个关于清除浮动的的方法。如果你说你要的就是浮动为什么要清除浮动的话，我就真的无言以对了，那你就当我没说。

    关于我们在布局的时候，经常会用到浮动和定位，特别是涉及到宽高自适应的网站布局时，就经常会出现“诶！我父元素的盒子设置的样式怎么不见了”，当你一按F12，在众多代码寻它千百遍之后，终于蓦然回首时发现万花丛中的那个盒子赫然显示着高度为零，what，我的高度怎么为零？不是说好父元素可以靠子元素撑开么？这是什么情况，是不是我的智商有问题？是不是我不适合学这个？为什么别人的可以我的不行？是不是浏览器针对我？其实这种问题刚开始学这个的话每个人都会碰到，这就是典型的父元素高度塌陷问题，这问题主要归根于你的子元素使用了浮动或者定位。

我们都知道，浮动和定位都是使元素脱离文档流，简单的一点讲就是它在网页上不占位置，不按照浏览器规定的顺序来排列，它是漂浮于文档流之上，当它子元素不占位置，父元素就相当于是一个空盒子。就好比一个气球，一开始你吧气球里面灌满了水，气球自然就撑开了，当你有时候有需求会把水倒到杯子里面，倒进杯子之后气球后自然瘪了。子元素就相当于水，父元素就相当于气球，浮动和定位就相当于把水取出来单独放一个容器，想要让原来的气球再撑起来，我们就需要把这个水再放回去，但是如果把水再倒进去就失去了把水放到杯子里的意义，所以现在只有一种方法就是连杯子一起放到气球里面去，这个方法在网页里面应用就是清除浮动。清除浮动有好多种，现在我们来谈谈清除浮动的几种常见的方法（真正的现在才开始）。

第一种就是给父元素加上高度，或许有人会说了，你他吗这是什么狗屁方法，能给高度我还用担心父元素高度塌陷？不可否认的是这是最简单的方法，你什么都不用做一个height:**px就解决了问题，但是这个方法对于那种宽高自适应或者流体布局的网站来说就跟没说一样，一个字“不能给”。面对这种不能给的我们也不是没有办法。

第二种方法是当子元素浮动的时候也给父元素增加浮动，但是这就会引起父元素的父元素高度塌陷，然后我们再给父元素的父元素增加浮动，于是父元素的父元素的父元素再次塌陷，然而我们需要继续给父元素的父元素的父元素增加浮动。这样加上就可可能影响到子元素的祖宗十八代了，所以这种方法只可以解决当前问题，可能会引发一串的麻烦，所以就不可取的。这是我们就需要的第三种方法。

第三种就是使用clear：both，clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素，就是我们需要在兄弟元素上面增加，但兄弟元素不能是浮动的元素且必须是父元素里面最后的一个元素，但是如果子元素在同一排的话，就必须在末尾增加一个空元素来设置clear,这就增加了多余的代码，并且IE6、IE7是不支持这个属性的。并且这个在后期维护中将是噩梦，这是坚决不能忍受的。那么现在还有一种方法。

第四种是使用display：inline-block, 这种方法就不管你一排有多少子元素，都不需要给float，直接全部给个这个属性，inline-block是给子元素转换成行内块，应该都知道行内块是直接在一行内显示的，所以自然不需要使用浮动了，不用浮动的话自然就没有高度塌陷问题了，但是他会带来两个BUG，行内块和其他元素之间会生成一个间隙，但是这个可以给父元素增加font-size：0来解决，还有另外一个问题就是，当行内块里面没有内容时，是按照盒子底部对齐来排列的，块里面有内容的时候，行内块是按照内容的底部对齐来排列，这时候我们就需要使用vertical-align来设置元素的对齐方式，如果一行内有多个元素的时候我们就需要全部设置此属性，也就是说我们使用这个方法就要解决这个方法带来的BUG，这个方法还有一个致命的问题，那就是IE6，IE7同样是不兼容的。所以再牛逼的方法都逃不掉被IE6扼杀的命运。所以这个方法还不是很完美，那我们再找找看还有没有办法。

第五种则是给父元素增加overflow:hidden;当子元素浮动的时候，我们只需要给父元素增加一个overflow:hidden;我们应该知道这个是裁切超出盒子部分的内容，所以有人要问了，为什么这个也可以清楚浮动呢，这个就要牵扯到BFC了，所有能触发BFC的属性都可以解决高度塌陷问题，至于什么是BFC可以去百度查一下，但是这个方法就如第三种和第四种方法一样当遇到万恶的IE6、IE7我们也是game over的，还有一点就是当overflow碰到绝对定位和相对定位的时候也是GG的，这时候我们不要灰心，或许你会问，世界这么大难道就没有能完美解决高度塌陷的方法么？现在我们来看看第六种方法。

第六种方法是我们常用的定位，当我们子元素使用浮动时，给父元素使用相对定位（position：absolute）或者固定定位（fixed）的时候，我们就可以解决高度塌陷问题。因为固定定位的话一般是在特殊情况下使用，所以我们用到的只有相对定位(absolute)，但是这个是有局限性的，只能清除浮动带来的高度塌陷，如果子元素使用了相对定位，这个方法是没有用的。这种方法虽然没有像前几种方法那样涉及到兼容问题但是其局限性可见一斑。说到这里或许你们会面无表情的问，敢情你说了这么多都是废话，难道没有一个可以完美解决浮动的方法么？这个嘛……既然说道这了，现在就放出我们的大招，还真有一个办法可以解决，这就是我们该提到的最后的一种方法。

这最后的一种方法就是伪类清除法，就是传说种的万能清除法，它可以兼容任何浏览器包括IE6，这个方法是这样的：

.clear:after{

content:‘‘‘‘;

display:block;

clear:both;

height:0;

overflow:hidden;

visibility:hidden;

}

.clear{zoom:1;}

看到上面的代码应该都看的出来，这个是结合以上的所有方法而形成的，.clear是类名这个可以随便取，但为了语义化才使用这个类名，虽然这个方法看起来很复杂，其实我们只需要在初始化里面加上这个样式，当我们需要清除浮动时只需要在塌陷的那个元素多加一个类名clear就可以 了，看着复杂其实用起来很方便。