zoukankan      html  css  js  c++  java
  • css 清楚浮动三种方法

    我们可以看到这样一个布局:

    <style>
        .left{
            width: 200px;
            height: 200px;
            background-color: #00ee00;
            float: left;
        }
        .right{
            width: 100px;
            height: 200px;
            background-color: #0000FF;
            float: left;
        }
        .footer{
            width: 300px;
            height: 50px;
            background-color: #0f0f0f;
        }
    </style>
    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>

    我们预期效果:                            结果:

                                                

    原因:因为父盒子没有给高,然后content内的子元素又是左浮动,脱离标准流,然后下面的footer就会跑上去,这是因为浮动问题产生的,如何解决:

    方法1:使用clear:both

      

    <style>
        .left{
            width: 200px;
            height: 200px;
            background-color: #00ee00;
            float: left;
        }
        .right{
            width: 100px;
            height: 200px;
            background-color: #0000FF;
            float: left;
        }
        .footer{
            width: 300px;
            height: 50px;
            background-color: #0f0f0f;
        }
        .clearfix{
            clear: both;
        }
    </style>
    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>
    </div>
    <div class="footer"></div>

    方法二:使用overflow:hidden;

    <style>
        .content{
            overflow: hidden;
        }
        .left{
            width: 200px;
            height: 200px;
            background-color: #00ee00;
            float: left;
        }
        .right{
            width: 100px;
            height: 200px;
            background-color: #0000FF;
            float: left;
        }
        .footer{
            width: 300px;
            height: 50px;
            background-color: #0f0f0f;
        }
    </style>
    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>

    第三种(推荐):clearfix伪类

    <style>
        .left{
            width: 200px;
            height: 200px;
            background-color: #00ee00;
            float: left;
        }
        .right{
            width: 100px;
            height: 200px;
            background-color: #0000FF;
            float: left;
        }
        .footer{
            width: 300px;
            height: 50px;
            background-color: #0f0f0f;
        }
        .clearfix:after{
            content: "";
            display: block;
            clear: both;
            height: 0;
            line-height: 0;
            visibility: hidden;
        }
        .clearfix{
            zoom: 1;//兼容ie浏览器
        }
    </style>
    <div class="content clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>

      

  • 相关阅读:
    200行代码实现Mini ASP.NET Core
    使用Elastic APM监控你的.NET Core应用
    .NET西安社区「拥抱开源,又见 .NET:壹周年Party」活动简报
    西安7月21日「拥抱开源,又见.NET:壹周年Party」线下交流活动
    领域驱动设计(DDD)编码实践
    再谈领域驱动设计
    「拥抱开源, 又见 .NET」系列第三次线下活动简报
    西安活动 | 4月20日「拥抱开源,又见.NET :云时代 • 新契机」
    在Xunit中使用FsCheck
    rocketMq特性(features)
  • 原文地址:https://www.cnblogs.com/alex-xxc/p/10019443.html
Copyright © 2011-2022 走看看