zoukankan      html  css  js  c++  java
  • 清除浮动的两种方法测试

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Clear Test A</title>
    <style type="text/css">
    .box {
        background: #000;
        border: 1px solid #F00;
        padding: 10px;
    }
    .box_left, .box_right {
        border: 1px solid #FFF;
        background: #999;
        width: 200px;
        height: 150px;
    }
    .box_left {
        float: left;
    }
    .box_right {
        float: right;
    }
    .clear {
        clear: both;
        height: 20px;
        background-color: #F00;
    }
    </style>
    </head>
    <body>
    <div class="box">
      <div>
        <div class="box_left">float left盒子</div>
        <div class="box_right">float right盒子</div>
        <div class="clear"></div>
      </div>
      <div>
        <div class="box_left">float left盒子</div>
        <div class="box_right">float right盒子</div>
        <div class="clear"></div>
      </div>
    </div>
    </body>
    </html>
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Clear Test B</title>
    <style type="text/css">
    .box {
        background: #000;
        border: 1px solid #F00;
        padding: 10px;    
    }
    .box:after{
        content: '';
        color:red;
        display: block; 
        clear: both;
        height: 20px;
        background-color: #F00;
    }
    .box_left, .box_right {
        border: 1px solid #FFF;
        background: #999;
        width: 200px;
        height: 150px;
    }
    .box_left {
        float: left;
    }
    .box_right {
        float: right;
    }
    </style>
    </head>
    <body>
    <div>
      <div class="box">
        <div class="box_left">float left盒子</div>
        <div class="box_right">float right盒子</div>
      </div>
      <div class="box">
        <div class="box_left">float left盒子</div>
        <div class="box_right">float right盒子</div> 
      </div>
    </div>
    </body>
    </html>
  • 相关阅读:
    Linux基础命令---sudo
    Linux基础命令---yes
    Linux基础命令---shutdown
    Divide Two Integers
    java 判断两个数是否异号
    字节顺序的详细解释(转)
    java无符号移位(>>>)和有符号移位(>>)
    java 参数化类型
    c++事件内核对象(event)进程间激活(转)
    windows多线程编程(一)(转)
  • 原文地址:https://www.cnblogs.com/exesoft/p/10684219.html
Copyright © 2011-2022 走看看