從問題找緣由之CSS浮動清除

問題描述

浮動元素致使的後面img標籤居中對齊「失敗」，以下圖

<div>
    <div class="content1">
        <div class="float-left">left-div</div>
        <div class="float-right">right-div</div>
    </div>
    <div class="content2">
        <img src="./1.jpg" style="width:150px;height:150px;"/>
        <p>center text</p>
    </div>
</div>

<style>
    .content1{
        background: pink;
        height:50px;
        line-height:50px;
    }
    .float-left{
        float: left;
        width: 100px;
        height: 50px;
        background: tan;
    }
    .float-right{
        float: right;
        width: 100px;
        height: 51px;
        background: tan;
    }
    .content2{
        background:springgreen;
        text-align:center;
        height: 300px;
    }
</style>

問題緣由

浮動元素形成的影響，文本、行內元素、行內塊元素會採起環繞的方式排列在浮動元素周圍。圖中right-div的高度爲51px，高於父級div的50px，故img標籤居中是相對於 (父級div寬度)-(right-div寬度)來計算的,因此偏離了正常水平居中的位置。若將p標籤放到第img標籤前面去，則不會產生這種問題。但最好的辦法仍是 清除浮動。

清除浮動的方法

clear:both

• 使用<div style="clear:both"></div>

  1. 將上面的div插入content1和content2之間時，會形成content1和content2之間有一條縫隙，若是看不清，能夠將right-div的高度調大
  2. 將上面的div插入content1尾部時，無變化，問題並未解決

• 使用僞元素，結果與上面方式2一致，未能解決問題

  .clearfix:before,
  .clearfix:after{
    content: '';
    display: table;
    clear: both;
  }
  .clearfix: { zoom:1 } //觸發IE的haslayout.

BFC(Block formatting context)

• 設置content1樣式overflow:hidden,完美解決問題

總結：總而言之，本次問題是因爲浮動和設置了浮動元素父級元素高度共同做用的結果，不是僅僅清除浮動就能徹底解決的。若不設置浮動元素父元素的高度，則img也會正常垂直居中，但浮動未清除。若只清除浮動，而不解決高度突出的問題，則img不能正常垂直居中。設置 overflow:hidden恰好兩點都作到了。

參考文章：清除浮動方法解析