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

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

CSS - 清除浮动案例（使元素高度自适应）
CSS 中的浮动
清除浮动
CSS浮动续
清除浮动的几种常用方法
高度塌陷、清除浮动、元素垂直居中
清除浮动
css问题收集 2018-07-19
H5前端开发学习笔记——0x15清除浮动
css3复习

场景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 - 清除浮动案例（使元素高度自适应）
场景1：非块元素（不支持低版本IE浏览器）以上代码运行结果：期望结果：footer 标签内容在 section...
CSS 中的浮动
浮动的定义：元素脱离文档流举栗子：修改 CSS 代码，清除浮动：浮动的影响：父元素高度塌陷清除浮动： ...
清除浮动
清除浮动和闭合浮动区别：清除浮动虽然排版正确，但是，浮动元素的父元素的高度为空；闭合浮动：闭合浮动后元素高度正...
CSS浮动续
CSS清除浮动案例 CSS版心居中显示案例清除浮动的四种用法： 1. 使用空标记清除浮动，隔墙法，增加标签 2....
清除浮动的几种常用方法
父元素自适应宽高度，子元素浮动导致高度塌陷高度塌陷: 示例图： HTML: CSS: 第一种解决方案：通过给父...
高度塌陷、清除浮动、元素垂直居中
高度塌陷：定义：父元素没有设置高度，子元素设置了浮动（float）属性解决办法：清除浮动（仅清除浮动的负面影响，...
清除浮动
1 浮动元素高度问题 1 元素的高度在标准流和浮动流中有什么区别 2 清除方式一 1 为什么要清除浮动 3 清除浮...
css问题收集 2018-07-19
一、父元素高度无法撑开原因：1.子元素浮动解决：清除浮动清除浮动方法： .clearfix:after{c...
H5前端开发学习笔记——0x15清除浮动
清除浮动课时130 浮动元素高度问题(掌握) 课时131 清除浮动方式一(理解) 课时132 清除浮动方式二(理...
css3复习
清除浮动: 方法：clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样式： ...