前端清除浮动

最新推荐文章于 2023-01-31 10:40:59 发布

好__好

最新推荐文章于 2023-01-31 10:40:59 发布

阅读量176

点赞数

本文链接：https://blog.csdn.net/qq_32067151/article/details/89525443

版权

第一张方式：额外标签清楚法

<div style="clear: both;"></div>

特点：如果清除了浮动，父亲去自动检测孩子高度，以最高为准

优点：简单易懂

缺点：添加额外的标签破坏结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>额外标签 清除浮动</title>
    <style>
    .father {

    }
    .big {
        width: 200px;
        height: 200px;
        background-color: blue;
        float: left;
    }
    .small {
        width: 100px;
        height: 100px;
        background-color: yellow;
        float: left;
    }
    .footer {
        width: 400px;
        height: 100px;
        background-color: pink;
    }
    /* 清除浮动 */
    /* .clear {
        clear: both;
        如果清除了浮动, 父亲去自动检测孩子的高度  以最高的为准
    } */

    </style>
</head>
<body>
    <div class="father">
        <div class="big"></div>
        <div class="small"></div>
    </div>
    <!-- 额外标签清除浮动 -->
    <!-- <div class="clear"></div> -->
    <div style="clear: both;"></div> <!-- 优点:简单易懂 缺点:添加了很多额外没用的标签破坏结构 -->
    <!-- 额外标签清除浮动 -->
    <div class="footer"></div>
</body>
</html>

第二种方式：overflow清除法

在父标签盒子里添加overflow:hidden

优点：代码简洁

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>overflow 清除浮动</title>
    <style>
    .father {
        /* 在父元素这里加上 overflow :hidden; 就可以清除浮动
        不是所有的浮动都要清除 谁影响就清除谁
        优点:代码简洁;
        缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉
        无法显示需要溢出的元素; */
        overflow: hidden;

    }
    .big {
        width: 200px;
        height: 200px;
        background-color: blue;
        float: left;
    }
    .small {
        width: 100px;
        height: 100px;
        background-color: yellow;
        float: left;
    }
    .footer {
        width: 400px;
        height: 100px;
        background-color: pink;
    }

    </style>
</head>
<body>
    <div class="father">
        <div class="big"></div>
        <div class="small"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

第三种方式:after伪元素清除法

.clearfix:after{ /* 正常浏览器清除浮动 /
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearfix{
        zoom: 1; /* zoom 1 就是ie6 清除浮动的方法 * 是ie7以下的版本所识别 */
    }
第四种方式：双伪元素标记法

.clearfix:before, .clearfix:after {
        content: "";
        display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>overflow 清除浮动</title>
    <style>
    .clearfix:before, .clearfix:after {
        content: "";
        display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }

    .father {

    }
    .big {
        width: 200px;
        height: 200px;
        background-color: blue;
        float: left;
    }
    .small {
        width: 100px;
        height: 100px;
        background-color: yellow;
        float: left;
    }
    .footer {
        width: 400px;
        height: 100px;
        background-color: pink;
    }

    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="big"></div>
        <div class="small"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

好__好

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端清除浮动

第一张方式：额外标签清楚法<div style="clear: both;"></div>特点：如果清除了浮动，父亲去自动检测孩子高度，以最高为准优点：简单易懂缺点：添加额外的标签破坏结构<!DOCTYPE html><html lang="en"><head> <meta charset="UT...
复制链接

扫一扫