• HTML&CSS基础-完善clearfix


                 HTML&CSS基础-完善clearfix

                                              作者:尹正杰

    版权声明:原创作品,谢绝转载!否则将追究法律责任。

    一.抛出问题

    1>.HTML源代码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>完善clearfix</title>
            
            <style type="text/css">
                .box1{
                    width: 300px;
                    height: 300px;
                    background-color: red;
                }
                
                .box2{
                    width: 300px;
                    height: 200px;
                    background-color: yellow;
                    /**
                     *     子元素和父元素相邻的垂直外边距会发生重叠,子元素的外边距会传递给父元素。
                     *     使用空的table标签可以隔离父子元素的外边距,阻止外边距的重叠。
                     */
                    margin-top: 100px;
                }
                
            </style>
        </head>
        <body>
            
            <div class="box1">
                <div class="box2"></div>
            </div>
        </body>
    </html>

    2>.浏览器打开以上代码渲染结果

    二.使用空table解决问题

    1>.HTML源代码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>完善clearfix</title>
            
            <style type="text/css">
                .box1{
                    width: 300px;
                    height: 300px;
                    background-color: red;
                }
                
                .box1:before{
                    content: "";
                    /*将一个元素设置为表格显示*/
                    display: table;
                }
                
                .box2{
                    width: 300px;
                    height: 200px;
                    background-color: yellow;
                    /**
                     *     子元素和父元素相邻的垂直外边距会发生重叠,子元素的外边距会传递给父元素。
                     *     使用空的table标签可以隔离父子元素的外边距,阻止外边距的重叠。
                     */
                    margin-top: 100px;
                }
                
            </style>
        </head>
        <body>
            
            <div class="box1">
                <div class="box2"></div>
            </div>
        </body>
    </html>

    2>.浏览器打开以上代码渲染结果

    三.完善clearfix的最终版本

    1>.HTML源代码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>完善clearfix</title>
            
            <style type="text/css">
                .box1{
                    width: 300px;
                    height: 300px;
                    background-color: red;
                }
                
                .box2{
                    width: 300px;
                    height: 200px;
                    background-color: yellow;
                    /**
                     *     子元素和父元素相邻的垂直外边距会发生重叠,子元素的外边距会传递给父元素。
                     *     使用空的table标签可以隔离父子元素的外边距,阻止外边距的重叠。
                     */
                    margin-top: 100px;
                }
                
                .box3{
                    border: 10px blue solid;
                }
                
                .box4{
                    width: 100px;
                    height: 100px;
                    background-color: deeppink;
                    float: left;
                }
    
                /**
                 *     解决父子元素的外边距重叠
                 * 
                 *     .box1:before{
                 *         content: "";
                 *          将一个元素设置为表格显示 
                 *         display: table;
                 *     }
                
                /**
                 *     解决父元素高度塌陷
                 * 
                 *     .clearfix:after{
                 *         content: "";
                    *         display: block; 
                 *         display: table;
                 *         clear: both;
                 *     }
                 * 
                 /
                 
                 /**
                  *  经过修改后的clearfix是一个多功能的,既可以解决高度塌陷,又可以确保父元素和子元素的垂直外边距不会重叠
                  */
                 .clearfix:after, .clearfix:before{
                     content: "";
                     display: table;
                     clear: both;
                 }
                 /*兼容IE6*/
                 .clearfix{
                     zoom: 1;
                 }
                 
            </style>
        </head>
        <body>
            
            <div class="box3 clearfix">
                <div class="box4"></div>
            </div>
            
            <div class="box1 clearfix">
                <div class="box2"></div>
            </div>
        </body>
    </html>

    2>.浏览器打开以上代码渲染结果

  • 相关阅读:
    起步X5 UI模型使用的新的JAVASCRIPT UI库 DHTMLX (简称DHX)
    行车记录仪
    牛客网——华为机试(题9:提取不重复的整数)(Java)
    牛客网——华为机试(题8:合并表记录)(Java)
    牛客网——华为机试(题7:取近似值)(Java)
    牛客网——华为机试(题6:质数因子)(Java)
    牛客网——华为机试(题5:进制转换)(Java)
    牛客网——华为机试(题4:字符串分隔)(Java)
    牛客网——华为机试(题2:计算字符个数)(Java)
    牛客网——华为机试(题1:字符串最后一个单词的长度)(Java)
  • 原文地址:https://www.cnblogs.com/yinzhengjie/p/9965383.html
Copyright © 2020-2023  润新知