zoukankan      html  css  js  c++  java
  • css清除浮动

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box {
                border: 1px solid red;
                /* overflow: hidden; 第二种方式清除浮动 */
            }
    
            /* 第三种方式清除浮动:伪元素清除浮动 */
            .clearfix:after {
                content: '';
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }
    
            /* 兼容ie6、7版本 */
            .clearfix {
                *zoom: 1;
            }
    
            .one {
                width: 200px;
                height: 200px;
                background-color: pink;
                float: left;
            }
    
            .two {
                width: 200px;
                height: 200px;
                background-color: pink;
                float: left;
                margin: 0 10px;
            }
    
            .three {
                width: 200px;
                height: 200px;
                background-color: pink;
                float: left;
            }
        </style>
    </head>
    
    <body>
        <div class="box clearfix">
            <div class="one">1</div>
            <div class="two">2</div>
            <div class="three">3</div>
            <!-- 第一种方式清除浮动 -->
            <!-- <div style="clear: both;"></div> -->
        </div>
    </body>
    
    </html>
  • 相关阅读:
    Exercise02_09
    Exercise02_05
    Exercise02_01
    Exercise02_03
    Exercise02_07
    web.xml配置详解
    面对不成功的人生
    请不以结婚为目的的恋爱吧
    年轻人能为世界做点什么
    不作就不会活
  • 原文地址:https://www.cnblogs.com/lyt520/p/15733937.html
Copyright © 2011-2022 走看看