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>
  • 相关阅读:
    rabbitmq fanout模式(发布订阅)
    rabbitmq php 限流
    rabbitmq 延迟队列 php
    rabbitmq 死信队列 php
    php rabbitmq发送消息并判断消息是否发送成功 ack comfirm机制
    php使用activemq
    golang 冒泡排序实现
    依耐项属性- 在需要使用的情况下添加
    Path 详解 之WPF
    WPF FrameWorkElement->UIElement->Visual
  • 原文地址:https://www.cnblogs.com/jzm17173/p/2606923.html
Copyright © 2011-2022 走看看