css-浮動與清除浮動的原理詳解（清除浮動的原理你知道嗎）

標籤：屬性   div   bfc   hid   src   str   nbsp   技術分享   font   

float元素A的特點：

1. 脫離文檔流
2. 靠向left或right
3. float元素會和塊盒子重疊
   • 準確來說，是塊盒子和A重疊，但塊盒子內容會浮動在A周圍
   • 不會和inline元素重疊

    <div class="parent">        <div class="box"></div>        <p>            孟子曰：“君子有三樂，而王天下不與存焉。父母俱存，兄弟無故①，一樂也；仰不愧於天，俯不怍②於人，二樂也；得天下英才而教育之，三樂也。
君子有三樂，而王天下者不與存焉孟子曰：“君子有三樂，而王天下不與存焉。父母俱存，兄弟無故①，一樂也；仰不愧於天，俯不怍②於人，二樂也；得天下英才而教育之，
三樂也。君子有三樂，而王天下者不與存焉孟子曰：“君子有三樂，而王天下不與存焉。父母俱存，兄弟無故①，一樂也；仰不愧於天，俯不怍②於人，二樂也；
得天下英才而教育之，三樂也。君子有三樂，而王天下者不與存焉        </p>        <div class="box"></div>        <div class="behind"></div>        <div class="box"></div>    </div>        .parent{            width:380px;            background-color:rgb(25, 132, 199);        }        .box{            width: 120px;            height: 100px;            float: left;            background-color: rgb(25, 199, 185);        }        .behind{            width: 150px;            height: 120px;            background-color: black;        }

圖中顯示了浮動導致的三大問題（1） 高度塌陷，父元素parent沒被子浮動元素撐開（2） 浮動元素 和 塊狀元素 重疊 （3）文字、非塊狀元素img浮動在浮動元素周圍（本質上這也算是第二種元素重疊的問題，因為元素重疊了而內容浮動在其周圍） 主要的解決方案分三類：1.構建BFC元素   2.利用清除浮動的屬性clear   3.暴力解法1.構建BFC元素BFC元素的兩個特性①float元素不會和BFC元素重疊 ②BFC元素計算高度會算上float元素，所以BFC就可以解決float帶來的高度塌陷、元素重疊的問題

• 高度塌陷：將父元素設定為BFC元素
• 元素重疊：將浮動元素之後的元素設定為BFC元素

設定BFC元素的方式：display：inline-block、table-celloverflow：auto、scroll、hiddenfloat：left、rightposition：absolute、fixed2.利用清除浮動的屬性clear

可在浮動元素後添加清除浮動的空元素、虛擬元素，這種方法適用於浮動帶來的任何問題

• <div style="clear: both"></div>
• <br clear="all">
• ::after{content:""; display:block; clear:both;}

 需要注意的是解決元素重疊時，BFC解決的結果為，將元素變為inline-block元素，float元素和BFC元素處於一行；而clear屬性解決時，只是禁止浮動上來的元素靠近，float元素和後面的元素處於一列；如

 

 解決浮動問題的方法很多，需要根據不同的情況來選擇最適合的方法

 

css-浮動與清除浮動的原理詳解（清除浮動的原理你知道嗎）