關於HTML中浮動與清除的思考


    布局時需要利用浮動(float)的屬性,同時我們需要一個清除浮動(clear)與之配合才能達到預期的目標。

    w3s上關於float和clear的定義分別為:float:float 屬性定義元素在哪個方向浮動。

                                                     clear:clear 屬性設置一個元素的側面是否允許其他的浮動元素。

    一個簡單的例子(代碼什么的我就不貼出來了:)):

    這是我們通過浮動然后清理浮動(clear:both)之后預期想要達到的效果。

    如果不清理浮動會是怎樣?只清理右邊呢?只清理左邊呢?

    <!--沒有清理浮動的效果--!>

    <!--clear:right 右側不允許浮動--!>

    clear:left之后和我們預期的效果一樣。為什么會產生這些不同的結果呢?又為什么文字在而顏色miss了呢?

    經過查資料以及問朋友之后得到了想要的答案:

    左邊部分和右邊部分浮動后就脫離了文檔流,而尾部看到上面沒人就自動跑到頭部的下面去了(TAT),這就是我們沒有清理浮動后看不到尾部黃色的原因。那又是為什么能看到尾部的字體呢?浮動只是類似於絕對定位而不完全相同於絕對定位會完全脫離文檔流,會繼續對文檔流的內容產生影響,所以我們能看到文字描述。

    其實我們只需要用一個opacity屬性就能完全明白了。

    沒使用clear屬性時在opacity:0.5的狀態下如圖:

   

    (⊙o⊙)… 大概就是這樣吧。

 

 

    這是我第一次寫博客!這是我第一次寫博客!這是我第一次寫博客!重要的事說三遍。ahaaaaaaa,內容很簡單純新手向。剛畢業土木狗任性辭職了,然后准備接觸前端,聽說要想學習好前端需要多看博客多寫博客,所以我來了。爭取養成寫博客的習慣。

    萬一有人看到(會有人看到嗎?)之后覺得需要吐槽的襲來吧,有錯誤的地方歡迎指正,歡迎老手指導,新人交流!

  


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM