float屬性及清除浮動

float屬性及清除浮動

float屬性

float 屬性定義元素在哪個方向浮動。目前所有主流瀏覽器都支持 float 屬性。
屬性值

值	描述
left	元素向左浮動。
right	元素向右浮動。
none	默認值。元素不浮動，並會顯示在其在文本中出現的位置。
inherit	規定應該從父元素繼承 float 屬性的值。

1.浮動對自己的影響

塊級元素/行內元素設置成浮動屬性後會自動生成塊級框（塊級框有inline-block屬性–寬高可以設置，如果不設置寬高則會由內容撐開，在一行顯示）

2.浮動對周圍的影響

一.多個浮動元素同時存在時

<style>
    .divFloat{width: 100%;}
    .div1{float: left;height: 40px;width: 100%; background-color: red;}
    .div2{float: left;height: 40px; width: 100%;background-color: yellow;}
    .div3{float: left;height: 40px; width: 100%; background-color: blue;}
</style>
<div class="divFloat">
    <div class="div1">我是向左浮動元素,寬度100%</div>
    <div class="div2">我是向左浮動元素,寬度100%</div>
    <div class="div3">我是向左浮動元素,寬度100%</div>
</div>

圖片:

<style>
    .divFloat{width: 100%;}
    .div1{float: left;height: 40px;width: 10%; background-color: red;}
    .div2{float: left;height: 40px; width: 10%;background-color: yellow;}
    .div3{float: left;height: 40px; width: 10%; background-color: blue;}
</style>
<div class="divFloat">
    <div class="div1">我是向左浮動元素,寬度10%</div>
    <div class="div2">我是向左浮動元素,寬度10%</div>
    <div class="div3">我是向左浮動元素,寬度10%</div>
</div>

圖片:

二.浮動元素與非浮動元素共存時

1. 浮動元素的上一級是非浮動的塊級元素
   塊級浮動元素獨佔一行，向下順序排列；不重疊塊級浮動元素獨佔一行，向下順序排列；不重疊
   
2. 浮動元素的上一級是非浮動的行內元素
   如果同行有足夠的寬度容納浮動元素，則浮動元素會與行內元素佔據同一行（否則重起一行），且浮動元素位於最左（右）側，不重疊，但會改變行內元素佈局。
   
   
3. 浮動元素的下一級是非浮動的塊級元素
   文字內容不會上移重疊，邊框，背景會向上移動發生重疊
   
   
   若此時下方再右非浮動的塊級元素出現，會與下方文字重疊
   
4. 浮動元素的下一級是非浮動的行內元素
   如果同行有足夠的寬度容納非浮動行內元素，則非浮動行內元素會與浮動元素佔據同一行（否則重起一行），且浮動元素位於最左（右）側，不重疊，但會改變行內元素佈局。
   
   
   
   注：行內浮動元素和塊級浮動元素有相同的特性
   總結：1.浮動元素會儘可能的向頂端對齊，向左或向右對齊。
   2.浮動元素的高不會超過其上（下）內聯元素的高。
   3.浮動元素的下放爲塊級元素時纔會發生重疊現象

三.非浮動元素包含浮動元素時

1. 浮動元素的margin不會超過包含塊的padding

四.float屬性用途

1. 實現文字環繞
   float屬性的本質即實現文字環繞功能，
2. 實現多列布局
   例如：實現三列布局，兩側列固定寬度，中間列自適應；

<style>
   .divFloat{ width: 100%; }
   .div1{ float: left; height: 1000px;  width: 400px; background-color: red;  }
   .div2{  float: right; height: 1000px; width: 400px;  background-color: yellow; }
   .div3{ height: 1000px;  width: auto; background-color: blue;}
</style>
<div class="divFloat">
   <div class="div1">我是左側浮動元素float: left;,寬度400px</div>
   <div class="div2">我是左側浮動元素float: right;,寬度400px</div>
   //注意float:left標籤和float:right標籤必須相鄰；
   <div class="div3">我是中間自適應內容 width:auto</div>
</div>

清除浮動

爲什麼需要清除浮動？
浮動元素的本質是用來設置文字環繞。當元素設置成浮動屬性時，其會脫離文檔流形成塊級框，直接影響周圍元素的排列。因此需要清除浮動。針對不同的場景右不同的清除浮動的方式：

1. 使用僞類清除

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

2. 增加標籤清除

.clearfloat{clear:both}

這有較爲全面的清除浮動的方法總結 前端知識隨筆.