清除浮动的方法

最新推荐文章于 2024-07-25 15:07:09 发布

小萝莉_Lolita

最新推荐文章于 2024-07-25 15:07:09 发布

阅读量332

点赞数

分类专栏： CSS 文章标签：清除浮动 css overflow zoom hasLayout

本文链接：https://blog.csdn.net/MDreamlove/article/details/77687533

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.额外标签法
2.使用:after伪元素
3.给父元素定高
4.利用overflow：hidden;属性
5.父元素浮动
6.父元素处于绝对定位

浮动是个很强大的属性，开发网页布局经常用到它；但同时它也是个魔鬼，一不小心就会导致布局出现匪夷所思的问题，且用且珍惜阿~反正一开始接触CSS遇到这个魔鬼简直就是噩梦！一入前端深似海，遇到的坑跪着也得填上~

首先呈上问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer{
            border: 1px solid black;
            width:300px;
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: #ff4400;
            margin-right: 20px;
            float: left;
        }
        .footer{
            background-color: #005FC3;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

这里写图片描述

OK，效果如图，问题来了，本该包住3个div的outer div却没有包住它们，此刻只剩一条由上下边框贴合组成的线，同时footer div元素也跑到了3个浮动元素的底下。如何解决这个棘手的问题呢？

1.使用额外标签法：添加的额外标签清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer{
            border: 1px solid black;
            width:300px;
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: #ff4400;
            margin-right: 20px;
            float: left;
        }
        .footer{
            background-color: #005FC3;
            width: 200px;
            height: 100px;
        }
        .clearfix{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="clearfix"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

这里写图片描述

早期使用的普遍方法，同时应该也是大部分人最容易想到的，问题解决

2.使用:after 伪元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer{
            border: 1px solid black;
            width: 300px;
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: #ff4400;
            margin-right: 20px;
            float: left;
        }
        .footer{
            background-color: #005FC3;
            width: 200px;
            height: 100px;
        }
        .clearfix:after{  /*最简方式*/
            content: '';
            display: block;
            clear: both;
        }
        /* 新浪使用方式
        .clearfix:after{ 
            content: '';
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
        }
        */
        .clearfix{ /*兼容 IE*/
            zoom: 1;
        }
    </style>
</head>
<body>
    <div class="outer clearfix">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

这里写图片描述

看代码便可理解通过添加伪元素来实现浮动清除，添加空内容，同时设为块级元素，清除浮动。

3.给父元素定高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer{
            border: 1px solid black;
            width: 300px;
            height: 50px;
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: #ff4400;
            margin-right: 20px;
            float: left;
        }
        .footer{
            background-color: #005FC3;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

这里写图片描述

给父元素定高——三个子元素的高度（如果高度不同，应该设置为子元素的最大高度值），撑开父元素，那么footer div就不会跑到3个div子元素底下，从而正常显示。

4.利用overflow:hidden属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer{
            border: 1px solid black;
            width: 300px;
            overflow: hidden;
            zoom: 1;/*兼容 IE*/
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: #ff4400;
            margin-right: 20px;
            float: left;
        }
        .footer{
            background-color: #005FC3;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

效果图

这里解释一下，为什么overflow:hidden属性可以实现清除浮动？
通过分析“本意”：
overflow:hidden 的意思是超出的部分要裁切隐藏掉
那么如果 float 的元素不占普通流位置，普通流的包含块要根据内容高度裁切隐藏。
如果高度是默认值auto，那么不计算其内浮动元素高度就裁切，就有可能会裁掉float，这是反布局常识的。
所以如果没有明确设定容器高情况下，它要计算内容全部高度才能确定在什么位置hidden，浮动的高度就要被计算进去顺带达成了清理浮动的目标，
同理
overflow 非默认值
position 非默认值
float 非默认值
等都是遵循这个布局计算思路
参考知乎overflow:hidden为什么可以清除浮动？

zoom是何方神圣？
zoom是IE专用属性，firefox等是不支持的。它的本来作用是设置或检索对象的缩放比例，但这作用几乎用不到。
可以让网页实现IE7中的放大缩小功能。比如你想让你的网页缩小为原来的一半，那么就在body中加入style=”zoom:0.5”
设置zoom:1可以在IE6下清除浮动、解决margin导致的重叠等问题。
通常，当浮动子元素导致父元素塌陷的时候，只要给父元素加上overflow: hidden;来解决，但是对于IE不行，需要触发其hasLayout属性才可以。
zoom:1就是IE6 专用的触发 haslayout 属性的。hasLayout是IE特有的一个属性。很多的IE下的css bug都与其息息相关。在IE中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时，它负责对自己和可能的子孙元素进行尺寸计算和定位。
hasLayout对于内联元素也可以有效果，当内联元素的hasLayout为true的时候，可以给这个内联元素设定高度和宽度并得到期望的效果。

那么，又引出一个问题，什么是hasLayout?
hasLayout可以简单看作是IE5.5/6/7中的BFC(Block Formatting Context块级格式化上下文)。也就是一个元素要么自己对自身内容进行组织和尺寸计算(即可通过width/height来设置自身的宽高)，要么由其containing block来组织和尺寸计算。而IFC（即没有拥有布局）而言，则是元素无法对自身内容进行组织和尺寸计算，而是由自身内容来决定其尺寸（即仅能通过line-height设置内容行距，通过行距来支撑元素的高度；也无法通过width设置元素宽度，仅能由内容来决定而已）
当hasLayout为true时(就是所谓的”拥有布局”)，相当于元素产生新BFC，元素自己对自身内容进行组织和尺寸计算;
当hasLayout为false时(就是所谓的”不拥有布局”)，相当于元素不产生新BFC，元素由其所属的containing block进行组织和尺寸计算。
和产生新BFC的特性一样，hasLayout无法通过CSS属性直接设置，而是通过某些CSS属性间接开启这一特性。不同的是某些CSS属性是以不可逆方式间接开启hasLayout为true。并且默认产生新BFC的只有html元素，而默认hasLayout为true的元素就不只有html元素了。
另外我们可以通过object.currentStyle.hasLayout属性来判断元素是否开启了hasLayout特性。

5.父元素浮动

当父元素浮动的时候，无需为子元素的浮动清除浮动，布局时常常用到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer{
            border: 1px solid black;
            width: 300px;
            float: left;
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: #ff4400;
            margin-right: 20px;
            float: left;
        }
        .footer{
            background-color: #005FC3;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

这里写图片描述

虽然outer div消除了塌陷现象，但由于其也发生了浮动，而其后的元素处于正常文档流，会被跌在底下。
如果要解决可以参考前面的办法，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer{
            border: 1px solid black;
            width: 300px;
            float: left;
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: #ff4400;
            margin-right: 20px;
            float: left;
        }
        .footer{
            background-color: #005FC3;
            width: 200px;
            height: 100px;
        }
        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }
        .clearfix{
            zoom: 1;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
    <div class="clearfix"></div>
    <div class="footer"></div>
</body>
</html>

这里写图片描述

6.父元素处于绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer{
            border: 1px solid black;
            width: 300px;
            position: absolute;
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: #ff4400;
            margin-right: 20px;
            float: left;
        }
        .footer{
            background-color: #005FC3;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
    <div class="clearfix"></div>
    <div class="footer"></div>
</body>
</html>

这里写图片描述

与上一个方法同理，由于绝对定位已脱离正常文档流，故出现相同情况，解决办法依旧可以使用以上办法结合

参考文章浅谈CSS清除浮动的6种方法

小萝莉_Lolita

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
清除浮动的方法

参考文章浅谈CSS清除浮动的6种方法 1.额外标签法 2.使用:after伪元素 3.给父元素定高 4.利用overflow：hidden;属性 5.父元素浮动 6.父元素处于绝对定位浮动是个很强大的属性，开发网页布局经常用到它；但同时它也是个魔鬼，一不小心就会导致布局出现匪夷所思的问题，且用且珍惜阿~反正一开始接触CSS遇到这个魔鬼简直就是噩梦！一入前端深似海，
复制链接

扫一扫

专栏目录