zoukankan      html  css  js  c++  java
  • 清除浮动的6中方法

    1. 额外标签法

    2. 使用:after 伪元素

    3. 给父元素定高

    4. 利用overflow:hidden;属性

    5. 父元素浮动

    6. 父元素处于绝对定位

    在开发网页的时候经常需要用到各种浮动,此时便需要及时的清除浮动,否则将会导致布局出现问题

    引出问题:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .outer{
                border: 1px solid black;
                300px;
            }
            .inner{
                 50px;
                height: 50px;
                background-color: #ff4400;
                margin-right: 20px;
                float: left;
            }
            .footer{
                background-color: #005FC3;
                 200px;
                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>

    可以看出本应包住3个 inner DIV的 outer DIV 却没有包住他们,此刻只剩一条由上下边框贴合组成的线,同时 footer DIV元素也跑到了三个浮动元素的底下

    解决办法:

    1. 使用额外标签法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .outer{
                border: 1px solid black;
                 300px;
            }
            .inner{
                 50px;
                height: 50px;
                background-color: #ff4400;
                margin-right: 20px;
                float: left;
            }
            .footer{
                background-color: #005FC3;
                 200px;
                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;
                 300px;
            }
            .inner{
                 50px;
                height: 50px;
                background-color: #ff4400;
                margin-right: 20px;
                float: left;
            }
            .footer{
                background-color: #005FC3;
                 200px;
                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;
                 300px;
                height: 50px;
            }
            .inner{
                 50px;
                height: 50px;
                background-color: #ff4400;
                margin-right: 20px;
                float: left;
            }
            .footer{
                background-color: #005FC3;
                 200px;
                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;
                 300px;
                overflow: hidden;
                zoom: 1;/*兼容 IE*/
            }
            .inner{
                 50px;
                height: 50px;
                background-color: #ff4400;
                margin-right: 20px;
                float: left;
            }
            .footer{
                background-color: #005FC3;
                 200px;
                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>

    5. 父元素浮动

    当父元素浮动的时候,无需为子元素的浮动清除浮动,布局时经常用到

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .outer{
                border: 1px solid black;
                 300px;
                float: left;
            }
            .inner{
                 50px;
                height: 50px;
                background-color: #ff4400;
                margin-right: 20px;
                float: left;
            }
            .footer{
                background-color: #005FC3;
                 200px;
                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>

    可以看出虽然 outer DIV 消除了塌陷现象,但由于其也发生了浮动故,其后元素若处于正常文档流,会被跌在底下。

    如果要解决可以参考前面的办法。

    例如:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .outer{
                border: 1px solid black;
                 300px;
                float: left;
            }
            .inner{
                 50px;
                height: 50px;
                background-color: #ff4400;
                margin-right: 20px;
                float: left;
            }
            .footer{
                background-color: #005FC3;
                 200px;
                height: 100px;
            }
            .clearfix:after{
                content: "";
                display: block;
                clear: both;
            }
            .clearfix{
                zoom: 1;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="inner"></div>
            <div class="inner"></div>
            <div class="inner"></div>
        </div>
        <div class="clearfix"></div>
        <div class="footer"></div>
    </body>
    </html>

    6. 父元素处于绝对定位

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .outer{
                border: 1px solid black;
                 300px;
                position: absolute;
            }
            .inner{
                 50px;
                height: 50px;
                background-color: #ff4400;
                margin-right: 20px;
                float: left;
            }
            .footer{
                background-color: #005FC3;
                 200px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="inner"></div>
            <div class="inner"></div>
            <div class="inner"></div>
        </div>
        <div class="clearfix"></div>
        <div class="footer"></div>
    </body>
    </html>

    与上一个方法同理,由于绝对定位已脱离正常文档流,故出现相同情况,解决办法依旧可以使用以上办法结合,灵活多变。

  • 相关阅读:
    ZOJ 3765 Lights (zju March I)伸展树Splay
    UVA 11922 伸展树Splay 第一题
    UVALive 4794 Sharing Chocolate DP
    ZOJ 3757 Alice and Bod 模拟
    UVALive 3983 捡垃圾的机器人 DP
    UVA 10891 SUM游戏 DP
    poj 1328 Radar Installatio【贪心】
    poj 3264 Balanced Lineup【RMQ-ST查询区间最大最小值之差 +模板应用】
    【转】RMQ-ST算法详解
    poj 3083 Children of the Candy Corn 【条件约束dfs搜索 + bfs搜索】【复习搜索题目一定要看这道题目】
  • 原文地址:https://www.cnblogs.com/GoodPingGe/p/4940706.html
Copyright © 2011-2022 走看看