這裡是浮點數在CSS中的工作方式
封面照片由J A N U P R A S A D通過Unsplash。
還有其他人還記得過去使用浮動布局的日子嗎？我們曾經不得不在雪地，赤腳，兩種方式上坡。這些天使用flexbox和他們的網格鞭打者……
在任何情況下，浮動仍然適用於非大規模布局的事物。即使您最終不希望在最新的應用程序中使用它們，您最終可能會維護一個舊的遺留應用程序，該應用程序使用嚴格的浮動方法。掌握如何工作的基本知識可以在各種情況下派上用場。
另外，花車是CSS最大的擔憂之一。應用浮動並讓頁面上的所有內容突然轉移（並且不知道為什麼）是我們許多人所做的事情。讓我們今天克服那個絆腳石。
所以，讓我們直接進入並檢查浮子的神秘面紗。
基礎
這就是花車最擅長的：圍繞其他東西的流動文本。浮動是模仿列印布局的最佳方式。
發生的事情很簡單，這個：
- 浮動元素放置在原本可能的位置
- 它從正常的文檔流中刪除，儘可能向左或向右推
- 之後的元素將圍繞浮動元素排列
我可以漂浮中心嗎？
不。我知道它會很酷，但它不起作用。
我想你會想像如何實現這個文本和貓圖片版本。你怎麼會整齊地打破文本？沒有好辦法做到這一點。這可能就是它從未實施過的原因。
浮動不在正常的文件流程中？那就像「位置：絕對」？
不完全的。元素與 position: absolute （或類似的屬性）完全從文檔流程中刪除。絕對定位的元素通常可以最終位於其他附近元素的頂部或底部，因為它們完全相互忽略。
當一個元素浮動時，它不完全在正常的文檔流中，但它確實與其他元素交互;它們受制於特殊的定位規則，主要是它們會圍繞它進行安排。
花車不想大
沒有明確大小設置的浮動元素將「縮小以適應」其內容 – 也就是說，它將只佔用所需的寬度。如果裡面的內容不多，那就不會很大;如果有很多，它會變得更大。你可能在之前看到過類似的行為 position: absolute 和 position: fixed 元素。
預測浮標的去向
當你在玩Jabberwocky的例子時，你碰巧找到了這樣的東西嗎？
人們傾向於避免浮動的原因之一是它們似乎無法預測。如果一系列不同高度的浮子溢出它的線會發生什麼？
我們來看看浮動元素的定位規範：
（…）當一個元素浮動時，它被從文檔的正常流中取出（儘管仍然是它的一部分）。它向左或向右移動，直到它接觸其包含盒子的邊緣或另一個浮動元素。
因此，當我們擁有適合我們寬度的東西時，一切都很精緻和花花公子。當它沒有時，它會向下移動並浮動一些，直到它碰到它想要停在的邊緣 – 它的父容器的邊緣或另一個浮子。
為什麼最後一個沒有向上移動以填補那個可怕的空白？
浮點數永遠不會位於HTML順序之前的某個位置之上。
然而，它會儘可能地「浮動」，並牢記這一限制。
邊距，框模型和HTML順序
在基本的例子中，你是否為此煩惱？
我們需要的是保證金。如果您隨機選擇，您有大約1/3的機會猜測應用保證金的元素。儘管隨機猜測是CSS的本質，但讓我們試著了解浮點數在這裡做了些什麼。
＃1 – 如果你向外部容器添加margin-left會發生這種情況 #container – 它只是推動了一切。這並沒有真正解決浮動框出現問題的問題。可能沒有人試圖以這種方式修理花車，除了凌晨3點，絕望地哭泣。 （誰沒去過那裡？）
＃2 – 這是你可能實際嘗試過的東西 – 應用一個 margin-left 到文本本身。然而，文本的邊距是基於文本的「框」 – 如果浮動不在那裡，文本將是。 （您可以將其描繪為在浮動元素下方具有邊距。）
文本本身仍像以前一樣在浮動周圍流動，但它相對於其父元素有一個餘量。 margin屬性不能為文本添加「Z字形」邊距，並且它必須與由邊距表示的父元素分開，因此與float的分離不會發生。
＃3 – 邊距被添加到實際浮動元素，擴展其框。文本將圍繞整個浮動框流動，包括邊距。所以加入 margin-right 我們的左浮貓和 margin-left 對我們的右浮貓會給文本留出一點空間。
總之 – 將浮動元素上的邊距放在合併浮動框的周圍會導致其他內容流動，包括任何邊距。
我們在這裡得到的想法就是這樣 – 頁面上的其他東西在浮動周圍移動，而不是浮動在頁面上的其他東西周圍移動。
我們還可以將浮子堆疊在一起漂浮物將很好地放置在其他漂浮物旁邊，並且文本將在它們周圍流動。
請注意，放置浮動的HTML順序非常重要。如有疑問，浮標首先出現。假裝你是瀏覽器，並且你正在「按順序」閱讀HTML – 你想知道你的浮動內容首先在哪裡，所以你不必重新繪製所有必須在它之後流動的東西。
清除浮子
一個元素與 clear 它上面的屬性描述了該元素如何與附近的浮動元素交互。你可以在浮動事物和非浮動事物上放置一個明確的屬性。
明確的財產意味著：我不希望在我這附近有任何花車
由於在頁面上推送其他東西是很粗魯的，如果附近有一個衝突的浮動，那麼具有明確屬性的元素將向下移動。將清算元素視為社交尷尬和衝突避免。
浮動不會像你期望的那樣佔用空間
如果您之前使用過浮動，您可能已經發現自己處於這個位置：
該 #container 保持所有浮動（並且只有浮動）已經崩盤。這是因為浮動元素會將其從普通文檔流中刪除，並且周圍的容器不會創建新的塊格式化上下文。
記得我上面說的時候：
它從正常的文檔流中刪除，儘可能向左或向右推
「從文檔流程中刪除」在這裡有意義和技術後果
由於我們的CSS管理員指定的規則，容器的高度由「正常文檔流程內」的所有內容決定。但是，我們也可以將容器設置為「塊格式化上下文」 – 有點像頁面中的迷你布局 – 告訴容器它需要將自己視為一個迷你文檔，因為它延伸到適合所有內容，甚至是不合時宜的內容。
我們需要做一些令人信服的讓容器伸展以適應我們的花車，但我們知道我們有選擇。
幾種可能的解決方案：
1.創建一個流入的元素，但是在浮點數之後
這是 clearfix-type-one 筆在上面的解決方案。它也是「老派」的clearfix。
我們現在知道容器將伸展以適應其流動中的所有元素，並且浮子不在流動中。所以我們需要一個非浮動元素，它放在我們的浮動元素之後。我們可以使用 clear 屬性：
id="container"> class="floaty-left" src="https://placekitten.com/100/200"> class="floaty-left" src="https://placekitten.com/100/100"> class="floaty-left" src="https://placekitten.com/160/200"> class="floaty-left" src="https://placekitten.com/100/120"> style="clear: both;">