zoukankan      html  css  js  c++  java
  • _#【清除浮动】

    CSS 清除浮动的4种方法

    更简洁的 CSS 清理浮动方式

    1、

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box {
                background-color: #FF0;
            }
            .box-bd {
                display: inline;
                float: left;
                width: 100px;
                height: 100px;
                margin-right: 100px;
                background-color: #F00;
            }
            .clear {
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box-bd"></div>
            <div class="clear"></div>
        </div>
        2
    </body>
    </html>

    2、

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box {
                background-color: #FF0;
            }
            .box-bd {
                display: inline;
                float: left;
                width: 100px;
                height: 100px;
                margin-right:100px;
                background-color: #F00;
            }
            .box {
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box-bd"></div>
        </div>
        2
    </body>
    </html>

    3、

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box {
                background-color: #FF0;
            }
            .box-bd {
                display: inline;
                float: left;
                width: 100px;
                height: 100px;
                margin-right: 100px;
                background-color: #F00;
            }
            .box {
                width: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box-bd"></div>
        </div>
        2
    </body>
    </html>

    4、

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box {
                background-color: #FF0;
            }
            .box-bd {
                display: inline;
                float: left;
                width: 100px;
                height: 100px;
                margin-right: 100px;
                background-color: #F00;
            }
            .clearfix:after {
                visibility: hidden;
                display: block;
                font-size: 0;
                content: " ";
                clear: both;
                height: 0;
            }
            .clearfix {
                zoom: 1;
            }
        </style>
    </head>
    <body>
        <div class="box clearfix">
            <div class="box-bd"></div>
        </div>
        2
    </body>
    </html>

    5、

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box {
                background-color: #FF0;
            }
            .box-bd {
                display: inline;
                float: left;
                width: 100px;
                height: 100px;
                margin-right: 100px;
                background-color: #F00;
            }
            .cf:before,
            .cf:after {
                content: "";
                display: table;
            }
            .cf:after {
                clear: both;
            }
            .cf {
                zoom: 1;
            }
        </style>
    </head>
    <body>
        <div class="box cf">
            <div class="box-bd"></div>
        </div>
        2
    </body>
    </html>
  • 相关阅读:
    format的用法

    TADOQuery池
    10分钟了解JSON Web令牌(JWT)
    PHP操作Redis数据库常用方法
    平时在PHP编码时有没有注意到这些问题
    利用 Composer 一步一步构建自己的 PHP 框架(四)——使用 ORM
    ORM的详解
    oracle NLS_LANG环境变量设置
    验证选择每日学习总结:DropDownList是否已选择验证、存储过程参数为sql字符串问题、将截断字符串或二进制数据。\r\n语句已终止
  • 原文地址:https://www.cnblogs.com/jzm17173/p/2606923.html
Copyright © 2011-2022 走看看