HTML&CSS基礎-完善clearfix

本文轉載自查看原文 2018-11-15 18:39 1854 HTML與CSS

　　　　　　　　　　　　　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>.瀏覽器打開以上代碼渲染結果

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML&CSS基礎-表單簡介 HTML&CSS基礎-元素的層級 HTML&CSS基礎-樣式的繼承 HTML&CSS基礎-外部樣式表 HTML&CSS學習筆記 HTML&CSS學習總結（一） html&css靜態頁面【HTML&CSS】【8】HTML空格占位符 HTML&CSS基礎-內聯樣式和內部樣式表 HTML&CSS基礎-子元素和后代元素選擇器