HTML中清除浮動的幾種辦法

為什么會有浮動

在一張HTML里,元素的排序方式遵循文檔流.即是依次排序.從上到下,從左到右依次排序.

而脫離文檔流就意味着不再遵循此規則.可以通過float與positon使得元素脫離文檔流,當給一個元素添加float屬性時,元素就會脫離標准文檔流.

例如在如圖中有一個需求是:將P_tag_one與P_tag_two並列.這兩個元素可能是兩張並列的圖片.使用float屬性時最佳的選擇.

浮動帶來的問題

浮動會帶來的問題是當子元素浮動時.不清除浮動的話就會造成后面的元素排版亂序.

如何去解決浮動問題

現在的問題就變成P_tag_one與P_tag_two浮動並列,但是又不讓子元素P_tag_one與P_tag_two的浮動,而導致后續元素排版亂序

代碼

沒有浮動之前

        *{
            margin: 0px;
            padding: 0px;
        }
        div,p{
            border-radius: 5%;      
            border: 1px solid rgba(0, 0, 0, 0.2);
            color:#394a6d;
            font-weight: bolder;
            font-size: 18px;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
        }

        p{
            width: 95px;
            height: 95px;
            background-color: #48FF7A;
        }
        .div_one{
            background-color: #51dacf;
        }
        .div_two{
            background-color: #41aaa8;
        }
        
    <div class="div_one">
        <p>P_one</p>
        <p>p_two</p>
    </div>

    <div class="div_two">
        <p>P_three</p>
        <p>p_four</p>
    </div>        

div_one中的兩個p浮動之后的情況

設置代碼:

        .div_one p{
            float: left;
        }

如圖顯示的情況.div_one里的p元素浮動,脫離了標准流.div_two里的兩個p元素就頂了上去.造成了元素重疊.

解決重疊方法1

通過手動設置浮動的元素的父元素的高.但是這樣做有一個不好的地方,就是把元素的高度給寫固定了,不利於后期的維護.不推薦這樣寫

        .div_one{
            background-color: #51dacf;
            height: 200px;
        }

方法2

第二種方式是通過給第二個元素設置clear屬性.使用clear屬性,但是父元素的高度不會顯示（父元素成了一條線 = = ）

        .div_two{
            width: 200px;
            clear:both; 
            background-color: #41aaa8;
        }

方法3

通過在中間添加一個元素,給添加的元素設置clear屬性.但是違背了HTML負責結構,CSS負責設置樣式的原則

    .wall{
            clear: both;
        }
        
    <h6 class="wall"></h6> //設置在div1與div2之間

方法4

在設置浮動元素的最后添加一個元素,此元素書用clear屬性.但是這樣做會增加一個無意義的標簽.不符合規范.

    .wall{
            clear:both;
        }
    <!--內牆法 撐起了父元素的高-->
    <div class="div_one">
        <p>P_one</p>
        <p>p_two</p>
        <h6 class="wall"></h6>
    </div>

    <div class="div_two">
        <p>P_three</p>
        <p>p_four</p>
    </div>

方法5

與方法4類似,但是使用了偽元素.好處是沒有使用HTML標簽.避免增加無意義的標簽.推薦使用

         .div_one::after,.div_one::before{
            /*設置添加的子元素的內容為空*/
            content: "";
            /*設置添加的子元素為塊級元素*/
            display: block;
            /*設置添加的子元素的高度為0*/
            height: 0;
            /*設置添加的子元素看不見*/
            visibility: hidden;
            /*給添加的子元素設置clear: both;*/
            clear: both;
        }
        .div_one{
            /*兼容IE6*/
            *zoom:1;
        }

方法6

使用overfllow:hieendn.優點就是比較簡潔.但是overflow: hidden也存在別的屬性功能;會有把超出的部分隱藏.

        .div_one{
            background-color: #51dacf;
            overflow: hidden;
            *zoom:1;
            
        }