• 盼盼Degenerate——清除浮动的方法


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    </head>
    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }
    li{
    list-style: none;
    }
    header{
    100%;
    background: orange;
    text-align: center;
    font-size: 24px;
    padding: 10px 0;
    }

    .box{
    100%;
    border: 2px solid #000000;
    }


    .box li{
    25%;
    height: 100px;
    background: pink;
    float: left;
    margin: 10px ;
    }
    div.carousel{
    100%;
    height: 300px;
    background: aquamarine;
    }
    footer{
    100%;
    position: fixed;
    bottom: 0;
    background: orange;
    text-align: center;
    font-size: 24px;
    padding: 10px 0;
    }
    </style>
    <body>
    <header>头部</header>
    <ul class="box">
    <li></li>
    <li></li>
    <li></li>
    </ul>
    <div class="carousel">
    </div>
    <footer>底部</footer>
    </body>
    </html>

    此时在浏览器中的样式

    第一种方法

    使用overflow: hidden;

    给父元素添加overflow: hidden;

     第二种方法

    在子元素后边添加一个空div

    <ul class="box">
    <li></li>
    <li></li>
    <li></li>
    <div class="clearfix"></div>
    </ul>

    css样式

    .clearfix{
    clear: both;
    }

    第三种使用伪元素

    css代码

    .box:after{
    content: '';
    display: block;
    clear: both;
    }

    第四种浮动父元素

    .box{
    100%;
    border: 2px solid #000000;
    float: left;
    }

    但是此时在浏览器我们可以看到并不是我们想要的效果

     为了解决这个问题 我们在父元素下面添加一个空div

    <body>
    <header>头部</header>
    <ul class="box">
    <li></li>
    <li></li>
    <li></li>
    </ul>
    <div class="clearfix"></div>
    <div class="carousel">
    </div>
    <footer>底部</footer>
    </body>

     css样式

    .clearfix{
    clear: both;
    }

    这样就解决了这个问题

  • 相关阅读:
    2020.10.23 19级training 补题报告
    2020.10.17 天梯赛练习 补题报告
    2020.10.16 19级training 补题报告
    2020.10.9 19级training 补题报告
    2020.10.10 天梯赛练习 补题报告
    2020.10.3 天梯赛练习 补题报告
    2020.10.2 19级training 补题报告
    第十届山东省ACM省赛复现补题报告
    VVDI Key Tool Plus Adds VW Passat 2015 Key via OBD
    Xhorse VVDI Prog Software V5.0.3 Adds Many MCUs
  • 原文地址:https://www.cnblogs.com/panpan-degenerate/p/7435555.html
Copyright © 2020-2023  润新知