您的位置: 首页  >  文章  >  CSS清除浮动

CSS清除浮动

分类: 文章 • 2022-10-10 21:49:33

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>

以上代码效果如下所示：

CSS清除浮动
图 1-1

 

       .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>

效果如下所示：

CSS清除浮动
图 1-2

该方式虽然解决了高度塌陷的问题，但会导致.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>

效果如下图所示： 

CSS清除浮动
图1-3

 五、使用: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相同。

相关推荐