CSS - 清除浮动案例（使元素高度自适应）

作者: Hyso | 来源:发表于2019-04-04 14:32 被阅读0次

场景1：非块元素（不支持低版本IE浏览器）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 700px;
            margin: 30px auto;
        }

        h3 {
            text-indent: 15px;
            margin-bottom: 30px;
        }
        
        .box-list {
            list-style: none;
        }

        .box-list li {
            width: 165px;
            height: 96px;
            float: left;
            margin-left: 15px;
            margin-bottom: 10px;
            background-color: yellow;
        }

        footer {
            height: 20px;
            background-color: red;
        }
    </style>
</style>
</style>
</head>
<body>
    <section class="box">
        <h3>盒子列表</h3>
        <ul class="box-list">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </section>
    <footer></footer>
</body>
</html>

以上代码运行结果：

期望结果：
footer 标签内容在 section 标签下面，但是现在结果如上图所示。
原因：
通过浏览器调试，发现 section 标签中 ul 标签的内容高度为0，导致整个 section 标签内容高度只有25px（即 h3 标签内容的高度）。因此实际上 footer 标签内容已经在 section 标签内容下面，但是由于 section 标签内容高度的错误，导致如上图的显示结果。
解决：
为 ul 标签添加样式：overflow:hidden; 来清除浮动（让元素适应内容的大小）。即：当子元素浮动后，父元素需使用 overflow:hidden; 来清除浮动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 700px;
            margin: 30px auto;
        }

        h3 {
            text-indent: 15px;
            margin-bottom: 30px;
        }
        
        .box-list {
            list-style: none;
            overflow:hidden;
        }

        .box-list li {
            width: 165px;
            height: 96px;
            float: left;
            margin-left: 15px;
            margin-bottom: 10px;
            background-color: yellow;
        }

        footer {
            height: 20px;
            background-color: red;
        }
    </style>
</style>
</style>
</head>
<body>
    <section class="box">
        <h3>盒子列表</h3>
        <ul class="box-list">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </section>
    <footer></footer>
</body>
</html>

以上代码运行结果：

场景2：块元素（不支持低版本IE浏览器）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 700px;
            margin: 30px auto;
        }

       .item {
            width: 165px;
            height: 96px;
            float: left;
            margin-left: 15px;
            margin-bottom: 10px;
            background-color: yellow;
        }

        footer {
            height: 20px;
            background-color: red;
        }
    </style>
</style>
</style>
</head>
<body>
    <div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <footer></footer>
</body>
</html>

以上代码运行结果：

期望结果：
footer 标签内容在 .box 下面，但是现在结果如上图所示。
原因：
通过浏览器调试，发现 .box 的内容高度为0。因此实际上 footer 标签内容已经在 .box 内容下面，但是由于 .box 内容高度的错误，导致如上图的显示结果。
解决：
在 .box 的最后一个 div 标签后再添加一个元素，且这个元素需满足以下条件：
1）是一个块元素（占一行）
2）是一个空元素（元素下面没有内容）
3）元素本身不浮动（样式中没有 float 属性）
4）为元素添加样式：clear: both; 来清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 700px;
            margin: 30px auto;
        }

       .item {
            width: 165px;
            height: 96px;
            float: left;
            margin-left: 15px;
            margin-bottom: 10px;
            background-color: yellow;
        }

        footer {
            height: 20px;
            background-color: red;
        }
    </style>
</style>
</style>
</head>
<body>
    <div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div style="clear: both;"></div>
    </div>
    <footer></footer>
</body>
</html>

以上代码运行结果：

让场景1、场景2支持低版本IE浏览器（推荐用此方法）

为需要清除浮动的元素（需要高度自适应的元素）添加一个 .clearfix 样式，且被添加 .clearfix 样式的元素本身是一个没有浮动（无 float 样式）的块元素， .clearfix 样式为：

 /* IE7+ */
.clearfix:after {
    content: "";
    display: block;
    clear: both;
 }

 /* IE6 IE7 */
 .clearfix {
    zoom: 1;
 }

场景1代码调整

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 700px;
            margin: 30px auto;
        }

        h3 {
            text-indent: 15px;
            margin-bottom: 30px;
        }
        
        .box-list {
            list-style: none;
        }

        .box-list li {
            width: 165px;
            height: 96px;
            float: left;
            margin-left: 15px;
            margin-bottom: 10px;
            background-color: yellow;
        }
        
        /* IE7+ */
        .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }

       /* IE6 IE7 */
       .clearfix {
            zoom: 1;
       }

        footer {
            height: 20px;
            background-color: red;
        }
    </style>
</style>
</style>
</head>
<body>
    <section class="box">
        <h3>盒子列表</h3>
        <ul class="box-list clearfix">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </section>
    <footer></footer>
</body>
</html>

场景2代码调整

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 700px;
            margin: 30px auto;
        }

       .item {
            width: 165px;
            height: 96px;
            float: left;
            margin-left: 15px;
            margin-bottom: 10px;
            background-color: yellow;
        }
       
         /* IE7+ */
        .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }

       /* IE6 IE7 */
       .clearfix {
            zoom: 1;
       }

        footer {
            height: 20px;
            background-color: red;
        }
    </style>
</style>
</style>
</head>
<body>
    <div class="box clearfix">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <footer></footer>
</body>
</html>

网友评论

本文标题：CSS - 清除浮动案例（使元素高度自适应）

本文链接：https://www.haomeiwen.com/subject/dpvfiqtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

CSS - 清除浮动案例（使元素高度自适应）

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读