CSS清除浮动方法小结

最新推荐文章于 2021-10-28 16:49:38 发布

weixin_34381666

最新推荐文章于 2021-10-28 16:49:38 发布

阅读量85

点赞数

原文链接：https://juejin.im/post/5a3c6a556fb9a0450e764c8b

版权

“当你浮动一个元素的时候...这些浮动规则就好像在说’尽量把这个元素往上放，能放多高放多高，直到碰到某个元素的边界为止。’”

浮动出现的意义：实现文字环绕图片的效果，所以把浮动理解为一种装饰。既不是结构也不是内容。

清除浮动方法小结

给父元素加overflow：hidden

这个方法最简单，给父盒子强制包围浮动元素，本来overflow用来防止包含元素被超大内容撑大，保持父级的宽度，超出部分被剪掉。另一个作用就是迫使父亲包围浮动元素。

overflow清除浮动的原理，在browser加载时，父盒子没有高度，但是只要设置了overflow，就会自动检索所有子盒子的高度，不管是浮动的子元素还是非浮动的标准流元素，把最高的当做父元素的高度，这样就实现了高度自适应。

让父级也一起浮动起来

这个方法有一个注意的地方，那就是浮动起来的元素会紧紧包裹起来其子元素，不管是不是浮动的子元素，注意点是要给浮动起来的父盒子一个宽度，同时要注意这个浮动起来的父级后面的盒子会想办法挤上来，要给后面的加一个clear来清除浮动。

添加非浮动的清除元素

有两个位置可以加清除元素，分别叫内墙发和外墙法。

内墙就是在父元素的最后加一个不浮动的元素，再对这个元素进行清除，因为父级一定会包围不浮动的元素，然后这个不浮动的还做了清除，那么就会待在上面浮动的下面，那么父级就会把浮动和不浮动的大家都包围起来了。

不过这种方法引入多余的空元素，不符合html的语义。有一个原理一样但是更好的方法clearfix伪类法：

只给要清除的父级元素加一个类名clearfix，在css中设置这个类为：

.clearfix::after{
        Content:”.”;
        height：0；
        display：block；
        clear：both；
        visilibility：hidden；
}
复制代码

外墙是指在两个浮动盒子之间加一个非浮动的元素，方法和内墙法相同。

给固定高度

这种方法给父盒子固定的高度之后，就有空间放内部浮动盒子了，浮动的就不会影响到后面的元素了，因为被父盒子管住了。但是因为不是自适应的，子盒子高度变高之后就会有超出父盒子的范围的可能。

但也不是这种方法不够好，在很多情况下还是要通过给固定高度来清除浮动的，比如某个带有hover效果的导航栏，hover时出现的背景效果比原来的高度要高，此时如果对父级应用overflow来清除浮动将会切除hover时多余的部分，所以给父级一个固定的高度是一个好选择，这样hover时候出现的多余部分也不会被切切切掉了....

上面说到导航hover或者选中时的效果，常遇到的是hover或者选中状态时，会在顶部或底部出现一条边框如图1、2，或更换一个更大的背景如图3。

图1在hover时添加一个上边框，直接添加2px的border会导致整个高度增加，同时会出现一个晃动，这时需要利用相对定位，在hover时将自己相对于自己原来的位置给一个向上的2px的相对定位，这样就不会出现晃动，但，整体高度还是变高了，如果想保持原高度，那么在hover时改变a的高度即可。

有几点要注意的：

盒子们都是顶端对齐，所以给盒子加高度就会出现晃动了，但是如果是像图2一样给下面加border，那么导航并不会晃动，只会相应的增加一点高度，那么在顶部增加效果的需要相对定位微调，而下面加边框则不需要定位调整了。
在父级没有设置overflow情况下，高度变了一点只要没有明显晃动最好不去改变高度值，但是如果父级设置了overflow，那就必须改变高度了，不然会被剪掉多余部分，当然也可以利用这点，想让一排导航中最后一个没有hover效果的话，就在父级设置overflow，然后在hover时改变前面的行高，最后一个不改那么就会让最后一个的行高超出父级而被切掉切掉了。

图2的效果是在hover时改变了背景图片，而且背景图片比原导航要高出一部分，这里可以利用背景图总结部分提到的padding挤出空间给背景图方法，在hover的时候给a增加一个padding-bottom，这样既没有改变a的高度值，又可以给背景图一个足够的空间展示出来了。