清除浮动的四种方式

x+x=2x

已于 2022-04-05 13:46:21 修改

阅读量248

点赞数

分类专栏：前端文章标签： html5 css3

于 2022-04-05 13:45:50 首次发布

本文链接：https://blog.csdn.net/qq_45430594/article/details/123968243

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了清除浮动的四种常见方法：额外标签法、父元素添加overflow属性、after伪元素法以及双伪元素法。通过这些方法，可以解决子元素浮动后导致的父元素高度塌陷问题，确保页面布局的正常显示。示例代码详细展示了每种方法的实现方式。

摘要由CSDN通过智能技术生成

1.额外标签法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav {
            width: 600px;
            margin: 0 auto;
        }
        .first {
            width: 200px;
            height: 200px;
            float: left;
            background-color: #333;
        }
        .second {
            width: 200px;
            height: 200px;
            float: left;
            background-color: #555;
        }
        .footer {
            height: 200px;
            background-color: skyblue;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="nav">
        <div class="first"></div>
        <div class="second"></div>
        <div class="clear"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

2.父元素添加overflow属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav {
            width: 600px;
            margin: 0 auto;
            overflow: hidden;
        }
        .first {
            width: 200px;
            height: 200px;
            float: left;
            background-color: #333;
        }
        .second {
            width: 200px;
            height: 200px;
            float: left;
            background-color: #555;
        }
        .footer {
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="nav">
        <div class="first"></div>
        <div class="second"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

3.after伪元素法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6、7专有 */
            *zoom: 1;
        }

        .nav {
            width: 600px;
            margin: 0 auto;
        }
        .first {
            width: 200px;
            height: 200px;
            float: left;
            background-color: #333;
        }
        .second {
            width: 200px;
            height: 200px;
            float: left;
            background-color: #555;
        }
        .footer {
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="nav clearfix">
        <div class="first"></div>
        <div class="second"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

3.双伪元素法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clearfix::before,
        .clearfix:after {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            /* IE6、7专有 */
            *zoom: 1;
        }
        .nav {
            width: 600px;
            margin: 0 auto;
        }
        .first {
            width: 200px;
            height: 200px;
            float: left;
            background-color: #333;
        }
        .second {
            width: 200px;
            height: 200px;
            float: left;
            background-color: #555;
        }
        .footer {
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="nav clearfix">
        <div class="first"></div>
        <div class="second"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

x+x=2x

关注

0
点赞
踩
0

收藏

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

这里写目录标题1.额外标签法2.父元素添加overflow属性3.after伪元素法3.双伪元素法1.额外标签法<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
复制链接

扫一扫

专栏目录