<h1>//CSS中float 和 clear的意義與應用關係//</h1>

float是Css中的一種排版的用具，就像他的名字一樣，可以讓有設定float的標籤浮起來，首先我們要知道，float是怎麼浮起來的？浮了多少距離起來？浮了哪些東西起來？浮到哪裡？
<h2>1.float浮起圖層的觀念是立體觀念</h2>
<p>float的觀念出現，讓排版的觀念變成立體空間的概念，因此以下列圖式會變成立體圖。</p>
</br>

<h2>2.p、div、span和標籤中包含的文字的關係(圖示)</h2>

<p>我在這</p>

以上這段程式碼的圖層排列為以下：

<!--
<div style="border:1px solid ;width:55px">我在這</div>
<div style="border:1px solid ;width:210px">p標籤的圖層在“我在這”下方</div>

------------------------------<----基準平面
-->

</br>
<p>*span和div標籤的圖層概念跟p一樣，但是inline和block屬性跟p不一樣，上圖p區塊之所以佔滿整“列”基準平面，正是因為p標籤屬於block屬性。</p>
</br>

<h2>3.float的浮起狀態</h2>

以下為未使用float浮起的原始狀態程式碼(為了方便辨識以顏色作為區分)

<p style="color:#f00">羊在這</p>
<p style="color:#080">貓在這</p>

<strong>[瀏覽器會顯示為]：</strong>
<p style="color:#f00">羊在這</p>
<div style="color:#080">貓在這</div>

</br></br>

<p><strong>[圖層排列為以下]：</strong></p>

</br></br>

<!--
<div style="display:flex">
<p style="color:#f00;border:1px solid;width:55px;margin:0px">羊在這</p>
<p style="color:#080;border:1px solid;width:55px;margin:0px">貓在這</p>
</div>

<div style="display:flex">
<p style="color:#000;border:1px solid;width:55px;margin:0px">p標籤</p>
<p style="color:#000;border:1px solid;width:55px;margin:0px">p標籤</p>
</div>
-->

</br></br>

<p><strong>[接下來使用float浮起<span style="color:#f00">"羊在這"</span>這個紅色p標籤]</strong></p></br>

<p style="float:left;color:#f00">羊在這</p>
<p style="color:#080">貓在這</p>

<p>元素最基本的排列會從整個畫面的初始(左上)開始接續排，因此<span style="color:#080">綠色的貓</span>圖層中，第一列並沒有被填滿，因此會自動填補到最上面的"列"，<span style="color:#080">綠色的p</span>也會因為第一列是空的，而填補上去。</p></br>
<p><strong>[瀏覽器會顯示為]：</strong></p>
<p style="float:left;color:#f00">羊在這</p>
<p style="color:#080">貓在這</p>
</br>

<strong>[圖層排列為以下]：</strong></br>
</br></br>

<p>*注意：p標籤設定float之後，實測會從block變成inline</p>

</br></br>

<h2>4.clear用法</h2>
<h3>//clear有三種</h3>
<li>clear:left意思是，元素盒子的左邊，不能與前面的float元素相鄰。</li>
<li>clear:right意思是，元素盒子的右邊，不能與前面的float元素相鄰。</li>
<li>clear:both意思是，元素盒子的左右邊，都不能與前面的float元素相鄰。</li>
</p>

<h3>//clear使用實例</h3>

<p style="color:#f00">羊在這</p>
<p style="color:#080">貓在這</p>
<p style="color:#008">狗在這</p>

<strong>[以上程式在碼瀏覽器會顯示為]：</strong>
<p style="color:#f00">羊在這</p>
<p style="color:#080">貓在這</p>
<p style="color:#008">狗在這</p>
</br></br>
<p><strong>[圖層排列為以下]：</strong></p>
</br></br>


</br></br></br>
<p><strong>[想要將以上排列為]:</strong></p>

<p style="float:left;width:130px;color:#f00;border:1px solid">羊在這，一隻羊兩隻羊三隻羊四隻羊五隻羊六隻羊七隻羊八隻羊a隻羊b隻羊</p>
<p style="float:left;width:60px;height:100px;color:#080;border:1px solid;margin:0px 5px 5px 5px">貓在這</p>
<p style="clear:left;width:230px;color:#008;border:1px solid;padding:2px">狗在這</p>
</br>
<p><strong>[則必須寫成以下]：</strong></p>
<p>
將<span style="color:#f00">紅色的羊</span>、<span style="color:#080">綠色的貓</span>，設定float，並將<span style="color:#008">藍色的狗</span>，設定<span style="background-color:#ccc">clear:left</span>
</p>

<p style="float:left;width:130px;color:#f00;border:1px solid">羊在這裡，一隻羊兩隻羊三隻羊四隻羊五隻羊六隻羊七隻羊八隻羊a隻羊b隻羊</p>
<p style="float:left;width:60px;height:100px;color:#080;border:1px solid;margin:0px 5px 5px 5px">貓在這</p>
<p style="clear:left;width:230px;color:#008;border:1px solid;padding:2px">狗在這</p>

</br>

<p><strong>[圖層排列為以下]：</strong></p>
</br></br>


</br></br>


</br></br>
<p><strong>
[若藍色的<span style="color:#008;background-color:#ccc">“狗在這”</span>沒有<span style="background-color:#ccc">clear:left</span>，則會變成以下]:</strong></p>
<p style="float:left;width:130px;color:#f00;border:1px solid">羊在這，一隻羊兩隻羊三隻羊四隻羊五隻羊六隻羊七隻羊八隻羊a隻羊b隻羊</p>
<p style="float:left;width:60px;height:100px;color:#080;border:1px solid;margin:0px 5px 5px 5px">貓在這</p>
<p style="width:230px;color:#008;border:1px solid;padding:2px">狗在這</p>
</br></br>
<p>
<span style="color:#008">藍色的p標籤</span>區塊圖層，因為前方都沒有任何元素擋著(<span style="color:#f00">紅色p標籤</span>和<span style="color:#080">綠色p標籤</span>都浮起來了)，因此會從最初始的第一“列”開始放置，疊在<span style="color:#f00">紅色p標籤</span>和<span style="color:#080">綠色p標籤</span>下方，並且因為寬度限制，且沒有設定高度因此<span style="color:#008">“狗在這”</span>文字將高度撐開。
</p>