CSS清除浮动

最新推荐文章于 2024-09-05 04:25:37 发布

原创最新推荐文章于 2024-09-05 04:25:37 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #CSS #清浮动

【Web前端】CSS 专栏收录该内容

9 篇文章

订阅专栏

CSS清除浮动

一、父元素设置高度

二、使父元素浮动

三、父元素添加display:inline-block

四、浮动元素后添加

五、使用:after伪类

六、溢出隐藏

问题引入：当在容器中出现浮动元素可能会导致浮动元素超出容器，即浮动元素高度大于容器高度（高度塌陷）。这是因为float:left属性会导致元素脱离文档流。此时我们需要清除浮动以消除高度塌陷的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .father{
            border:1px solid #00FFFF;
            width:500px;
            padding:10px;
            margin:0 auto;
        }
        img{
            width:400px;
            float: left;
        }
    </style>
<body>
    <div class="father">
        <img alt="" src="img/3.jpg" />
    </div>
</body>
</html>

以上代码效果如下所示：

.father的高度没有被img撑起来，这是因为我们将img设置为float:left使其脱离了文档流。现在我们通过以下几种方式解决该问题。

一、父元素设置高度

此方式拓展性不高不推荐使用，当img发生变化时，需要再次改动.father高度，不方便维护。

二、使父元素浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .father{
            border:1px solid #00FFFF;
            width:500px;
            padding:10px;
            margin:0 auto;
            float: left;
        }
        img{
            width:400px;
            float: left;
        }
    </style>
<body>
    <div class="father">
        <img alt="" src="img/3.jpg" />
    </div>
</body>
</html>

效果如下所示：

该方式虽然解决了高度塌陷的问题，但会导致.father无法居中。

三、父元素添加display:inline-block

效果如图1-2，也会导致margin:0 auto失效。

四、浮动元素后添加<br clear="both"/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .father{
            border:1px solid #00FFFF;
            width:500px;
            padding:10px;
            margin:0 auto;
        }
        img{
            width:400px;
            float: left;
        }
    </style>
<body>
    <div class="father">
        <img alt="" src="img/3.jpg" />
        <br clear="both"/>
    </div>
</body>
</html>

效果如下图所示：

五、使用:after伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .father{
            border:1px solid #00FFFF;
            width:500px;
            padding:10px;
            margin:0 auto;
        }
        img{
            width:400px;
            float: left;
        }
        .father:after{
            content: '';
            clear: both;
            display: block;
        }
    </style>
<body>
    <div class="father">
        <img alt="" src="img/3.jpg" />
    </div>
</body>
</html>

效果和图1-3一样。

六、溢出隐藏

使用overflow:hidden进行处理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .father{
            border:1px solid #00FFFF;
            width:500px;
            padding:10px;
            margin:0 auto;
            overflow:hidden;
        }
        img{
            width:400px;
            float: left;
        }
    </style>
<body>
    <div class="father">
        <img alt="" src="img/3.jpg" />
    </div>
</body>
</html>

效果与图1-3相同。