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>
  • 相关阅读:
    Debug权限提升
    QTime的本质上是一个int,QDateTime本质上是一个qint64
    QString先于QObject存在,因为QObject::objectName()返回的是QString
    C++杂记:运行时类型识别(RTTI)与动态类型转换原理
    gcc/g++编译(生动形象,从最容易入手的hello world解释了库的概念)
    分布式存储
    开源代码——Crouton
    android studio
    WebRTC
    FileProvider是个什么东西?
  • 原文地址:https://www.cnblogs.com/jzm17173/p/2606923.html
Copyright © 2011-2022 走看看