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>

      

  • 相关阅读:
    EOJ 1068 石子游戏-B
    二分图匹配(匈牙利算法模板)
    注入(3)--远程线程注入(CreateRemoteThread)
    cmd运行Java命令时编译通过,但是找不到主类或无法加载主类
    Java线程的两种实现方法
    Java String类一些操作的内存问题
    Java构造方法的继承调用
    Android布局(5)--绝对布局(AbsoluteLayout)
    Android布局(4)--相对布局(RelativeLayout)
    Android布局(3)--帧布局(FrameLayout)
  • 原文地址:https://www.cnblogs.com/alex-xxc/p/10019443.html
Copyright © 2011-2022 走看看