詳解利用clear清除浮動的一些問題解決

下面這段代碼是用來清除浮動帶來的高度塌陷問題

.clearfix:before {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

Question 1: 上面的代碼的可以實現清除浮動的問題嗎？

Answer： Can't. 由於clear屬性只能控制元素自己與前面的浮動元素的關係。在本例中，使用:before僞元素明顯位於全部子元素以前，故而clear屬性不會因後面的浮動元素產生任何做用效果。 clear屬性的官方定義能夠查看CSS文檔 。那麼應該如何修改呢？將:before換成:after便可。最終代碼以下：

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

Question 2: content屬性的內容能改爲空嗎content: '';？

Answer： Yes. 由於設置了 height:0; 和 visibility: hidden。 若是設置了content:'';，那麼 height:0; 和 visibility: hidden和 能夠去掉嗎？ 固然能夠，由於塊元素沒有內容就不會有高度咯。

更改後的代碼以下：

.clearfix:after {
    content: ""; 
    display: block;
    clear: both;
}

Question 3: display屬性的內容能改爲 inline 或 inline-block 嗎？

Answer： 不能。 咱們要明白float屬性的初衷————讓文字環繞圖片展現。翻譯成另一句話：內聯級別的元素會環繞浮動元素展現。那麼爲何 display: block;能夠解決高度塌陷的問題呢。 由於 clear屬性的含義是不讓元素自己與浮動元素的邊界相鄰。若是塊級元素要不與塊級元素邊界相鄰，只有換到下一行展現。也正爲換行，纔將父元素到高度撐開了，正式上面的代碼解決高度塌陷的原理。

Question 4: 下面到div元素會存在高度塌陷問題嗎？

<style>
    .clearfix::after {
        content: "";
        display: block;
        clear:left;
    }
    img { float: right; }
</style>
<div class="clearfix">
    <span>歷史的天空</span>
    <img src="images/naruto.gif">
</div>

Answer： 存在。爲何呢？要知道 clear屬性中， clear:left; 和 clear:right; 的區別。

left : 不與左浮動的元素產生邊界接觸；
right : 不與右浮動的元素產生邊界接觸；
both : 不與左浮動和右浮動的元素產生邊界接觸；
因此上面的代碼不會解決高度塌陷到問題。

若是有以下代碼：

<style>
    .clear-left { clear:left; }
    .clear-right { clear:right; }
    .fl { float: left;}
    .fr { float: right;}
    .box { 
        height: 30px; width: 30px;
        background: yellowgreen;
        margin: 5px;
    }
</style>
 
<div>
    <div class="box fl">1</div>
    <div class="box fr">2</div>
    <div class="box clear-left">3</div>
</div>
<div>
    <div class="box fl">1</div>
    <div class="box fr">2</div>
    <div class="box clear-right">3</div>
</div>

你會發現，兩個div的展現效果是相同的。也就是說，若是前面同時存在左浮動和右浮動到元素，那麼clear屬性值不管設成left 仍是right都可有可無。 反過來想，若是clear屬性設成 both，那麼不管前面的元素是左浮動仍是右浮動，都可有可無。這也是clearfix一般設置 clear:both;的緣由。

注意一點，咱們一直在說 解決 高度塌陷都問題，歷來沒有說清除浮動。 是由於本質上，浮動並沒被清除，咱們只是利用clear屬性解決了浮動元素帶來的父級元素高度塌陷問題。並且clear屬性影響也只是設置clear屬性的元素自己，而不是浮動元素。

爲了學習工做與休閒娛樂互不衝突，現新建圈【碼農茶水鋪】用於程序員生活，愛好，交友，求職招聘，吐槽等話題交流，但願各位大神工做之餘到茶水鋪來喝茶聊天。
瞭解更多