zoukankan      html  css  js  c++  java
  • CSS中clear属性的both、left和right浅析

    前端开发中,我们知道clear属性有none、both、left和right四个值。

    它们的具体含义如下:

    • none:允许两边都可以有浮动对象;
    • both:不允许有浮动对象;
    • left:不允许左边有浮动对象;
    • right:不允许右边有浮动对象。

    这里主要讨论both、left和right三个值。

    要用到的CSS代码如下:

        <style type="text/css">
            .container{
                margin: 30px auto;
                width:600px;
                height: 300px;
            }
            .p{
                border:solid 3px #a33;
            }
            .c{
                width: 100px;
                height: 100px;
                background-color: #060;
                margin: 10px;
            }
            .fl{
                float:left;
            }
            .fr{
                float:right;
            }
            .cl{
                clear:left;
            }
            .cr{
                clear:right;
            }
            .both{
                clear:both;
            }
        </style>

    一、普通浮动,无清除浮动,外容器塌陷:

    DOM结构:

        <div class="container">
            <div class="p">
                <div class="c fl"></div>
                <div class="c fl"></div>
                <div class="c fl"></div>
            </div>
        </div>

    效果图:

    二、左浮动,clear:both清除浮动:

    DOM结构:

        <div class="container">
            <div class="p">
                <div class="c fl">float left 1</div>
                <div class="c fl">float left 2</div>
                <div class="c both">clear both</div>
            </div>
        </div>

    效果图:

    三、右浮动,clear:both清除浮动:

    DOM结构:

        <div class="container">
            <div class="p">
                <div class="c fr">float right 1</div>
                <div class="c fr">float right 2</div>
                <div class="c both">clear both</div>
            </div>
        </div>

    效果图:

    四、左右浮动,clear:both清除浮动:

    DOM结构:

        <div class="container">
            <div class="p">
                <div class="c fl">float left</div>
                <div class="c fr">float right</div>
                <div class="c both">clear both</div>
            </div>
        </div>

    效果图:

    五、左浮动,清除左浮动,左浮动,未清除浮动的塌陷:

    DOM结构:

        <div class="container">
            <div class="p">
                <div class="c fl">float left1</div>
                <div class="c cl">clear float left</div>
                <div class="c fl">float left2</div>
            </div>
        </div>

    效果图:

    六、右浮动,清除右浮动,左浮动,未清除浮动的塌陷:

    DOM结构:

        <div class="container">
            <div class="p">
                <div class="c fr">float right</div>
                <div class="c cr">clear float right</div>
                <div class="c fl">float left</div>
            </div>
        </div>

    效果图:

  • 相关阅读:
    最牛B的编码套路
    查看端口号
    一个电脑 两个显示屏
    如何修改报表平台中数据决策系统登陆地址
    MTK+Android编译
    报表参数控件和报表内容自动居中设置方法
    如何把报表放到网页中显示(Web页面与报表简单集成例子)
    报表与微信公众号(企业号)集成方案
    在开发过程中调试报表插件详细教程
    电量检测芯片BQ27510使用心得
  • 原文地址:https://www.cnblogs.com/aaron-shu/p/4150009.html
Copyright © 2011-2022 走看看