解疑答惑—解決脫離標准文檔流（惡心的浮動）

在標准文檔流中要並排顯示內容但是會出現有的塊級標簽脫離標准文檔流的現象，為了解決這種現象我們有三種方法1、浮動 2、絕對定位 3、固定定位

浮動的方法解決脫表的問題真的是讓人啞巴吃黃連有苦難言，這個浮動整整讓我迷惑了一個禮拜，最終發現還有比這個方法好很多的一個方法就是絕對定位，非常好理解，而且用起來還非常的方便。

那么這里我先說一下清除浮動的方法有三種方法：1給父盒子設置寬高（一般不太常用）在導航欄的設置上用的很多，這里不做過多的介紹。

2.clear:both

　　就是清除left 、right、both的浮動

用法：

<div>
        <ul>
            <li>Python</li>
            <li>web</li>
            <li>linux</li>
            <!-- 給浮動元素最后面加一個空的div 並且該元素不浮動 ，然后設置clear:both  清除別人對我的浮動影響-->
            <!-- 內牆法 -->
            <!-- 無緣無故加了div元素  結構冗余 -->
            <div class="clear"></div>
            
        </ul>
        
</div>
<div class="box">
        
</div>

css樣式：

*{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        
        }


        div{
            width: 400px;
        
        }
        

        div ul li {
            float: left;
            width: 100px;
            height: 40px;
            background-color: red;
        }
        .box{
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
        .clear{
            clear: both;
        }



這種方法用的也比較少

 

3偽元素清除法（常用）

用法：給浮動的元素的父盒子添加一個clearfix的類，然后設置

.clearfix:after{
    /*必須要寫這三句話*/
    content: '.';
    clear: both;
    display: block;
}

 新浪首頁推薦偽元素清除法的寫法

/*新浪首頁清除浮動偽元素方法*/
              content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden

個人覺這個記憶的代碼有點繁瑣，但是清除的比較徹底

 

4.overflow：hidden（常用）

這個也能處理但是會出現一個問題：這個屬性定義溢出元素內容區的內容會如何處理。如果值為 scroll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。

 

　　說了這么多都是在處理一個問題就是清除浮動，但是我們回到最初的問題，我們是為什么牽扯到浮動的，就是因為塊級標簽脫離標准文檔流的事情，我們前面說了解決這個問題不止有這一種方法，還有絕對定位的方法，但是我就在這個浮動里，面不知道吃了多少虧，我差點就爬不出來了，我都感覺我好像沒沒有辦法去設計網頁了，只要設計網頁就有脫表的問題出現，只要出現就要用浮動，用浮動就要清除浮動，我感覺所有的bug都是在處理浮動上，險些放棄了前端，但是還好有絕對定位的出現，在讓我對前端重新燃起了希望之光，下面我着重介紹以一下絕對定位，只要學會了絕對定位，什么你的浮動呀，清除浮動呀，統統去吃屎吧，“父相子絕”解決你的所有問題

 

二、絕對定位   （父相子絕）　　

　　四個字就是核心：“父相子絕”父盒子相對定位子盒子絕對定位解決一切你的脫標問題

特點：1、脫標 2、做遮蓋效果，提高了層級，設置絕對定位以后，不區分行內元素和塊級元素，都能設置寬高。

參考點：

一、單獨一個絕對定位的盒子

1、當我們使用top屬性描述的時候是以也頁面的左上角為參考點來調整位置

2、當我們使用bottom屬性描述的時候，是以首屏頁面左下角為參考點來調整位置

二、以父輩盒子作為參考點

1、父輩元素設置相對定位，子元素設置絕對定位，那么會以父輩元素的左上角為參考點，這個父輩元素不一定是爸爸，它也可以是爺爺，曾爺爺。

2、如果父親設置了定位，那么以父親為參考點。如果父親沒有設置定位，那么以父輩元素設置定位的為參考點

3、不僅僅是父相子絕，父絕子絕，都是以父輩元素作為參考點

注意：父絕子絕沒有實戰意義，一般不會出現父絕子絕，因為絕對定位脫離 標准文檔流，影響頁面的布局，相反“父相子絕”在我們的頁面布局中，是常用的布局方案，因為父親設置相對定位，不脫離標准流。子元素設置絕對定位，僅僅是在在當前的父輩元素內調整該元素的位置

　　絕對定位的盒子無視父輩的padding

*{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 100%;
            height: 69px;
            background: #000;
        }
        .box .c{
            width: 960px;
            height: 69px;
            background-color: pink;
            /*margin: 0 auto;*/
            position: relative;
            left: 50%;
            margin-left: -480px;

            /*設置絕對定位之后，margin:0 auto;不起任何作用，如果想讓絕對定位的盒子居中。當做公式記下來 設置子元素絕對定位，然后left:50%; margin-left等於元素寬度的一半，實現絕對定位盒子居中*/
        }

 

 

解決脫標用絕對定位，父元素設置為相對定位 ：  position：relative

　　　　　　　　　　子盒子設置為絕對定位：    position：absolute