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>.浏览器打开以上代码渲染结果