CSS 清除浮动的方法

时间：2017-08-18 11:24:25 阅读：239 评论：0 收藏：0 [点我收藏+]

1. 使用额外标签法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer{
            border: 1px solid black;
            width: 210px;
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: #005FC3;
            margin:0 10px;
            float: left;
        }
        .footer{
            background-color: #ff4400;
            width: 212px;
            height: 100px;
        }
        .clearfix{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="clearfix"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

技术分享

这是早期普遍使用的方法，但是对于有代码洁癖的人来说，解决的不够完美

2. 使用 :after 为元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer{
            border: 1px solid black;
            width: 210px;
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: #005FC3;
            margin:0 10px;
            float: left;
        }
        .footer{
            background-color: #ff4400;
            width: 212px;
            height: 100px;
        }
        .clearfix:after{  /*最简方式*/
            content: ‘‘;
            display: block;
            clear: both;
        }
        /* 新浪使用方式
        .clearfix:after{ 
            content: ‘‘;
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
        }
        */
        .clearfix{ /*兼容 IE*/
            zoom: 1;
        }
    </style>
</head>
<body>
    <div class="outer clearfix">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

技术分享

3. 给父元素定高

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .outer {
                border: 1px solid black;
                width: 210px;
                height: 50px;
            }
            .inner {
                width: 50px;
                height: 50px;
                background-color: #ff4400;
                margin: 0 10px;
                float: left;
            }
            .footer {
                background-color: #005FC3;
                width: 212px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="inner"></div>
            <div class="inner"></div>
            <div class="inner"></div>
        </div>
        <div class="footer"></div>
    </body>
</html>

技术分享

4. 利用 overflow:hidden 属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer{
            border: 1px solid black;
            width: 210px;
            overflow: hidden;
            zoom: 1;/*兼容 IE*/
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: #005FC3;
            margin:0 10px;
            float: left;
        }
        .footer{
            background-color: #ff4400;
            width: 212px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

技术分享

CSS 清除浮动的方法

标签：nbsp 方法兼容 head oct png 清除 lock back

原文地址：http://www.cnblogs.com/luoshang/p/7387755.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行