零、說點什麼
好久沒更新了。并不是在折騰什麼大作，而是廣度學習與實踐中，加上婚禮等諸多大事，是以産出較少。
今天這篇也隻是小作，部落格是自己很好的學習工具，隻要我學習不止，部落格也會不斷更新的。
我們平時一般都使用
clear:both
清除浮動，貌似就幹這一件事件。用得很開心，但似乎了解上懵懵懂懂，我其實也是，早年的時候，測試過CSS
clear:left/right
，雖知其作用（80%确定而已），但不知其機理。
有必要再次整理下，溫故知新。可能很多同行都沒有注意
left/right
值，或者可能了解上含糊，或者不知道其實際意義在何處。So, follow me!
一、了解clear: left/clear: right
我不清楚大家是不是跟我一樣，我之前文章，寫浮動那一塊的時候，以及後來，都是以“
clear:both
清除浮動”這樣的陳述出來的。是以，當想到
clear: left
的時候，自然會認為是“清除左浮動”，
clear: right
是清除右浮動。
其實作在想想，這樣的了解與表示是不嚴謹的欠考慮的。
一般，現在中文圈流傳的表述是：
clear文法：
clear : none | left | right | both
取值：
none : 預設值。允許兩邊都可以有浮動對象
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許有浮動對象
w3.org官方的解釋是：「元素盒子的邊不能和前面的浮動元素相鄰」。
我個人覺得官方解釋更好一點。
無論是我“清除左/右浮動”，還是業界流傳的“不允許左/右邊有浮動對象”，其意思都是，設定的clear的元素讓浮動元素如何如何。也就是我讓别人如何如何~~大家可以仔細體會，細細感受下……
而官方的說法則是“設定了clear的元素不能怎樣怎樣”。也就是我自己如何如何~~大家可以再次感受下……
為何官方解釋更好呢？難道是“己所不欲勿施于人”的緣故？哈，這個解釋贊的，友善記憶。更通俗的原因是：
務必記住這句話：“float是魔鬼，會影響其他相鄰元素；但是clear是小白，其隻會影響自身，不會對其他相鄰元素造成影響！”
但是，官方的解釋似乎拗口，缺少點靈性。于是，我根據自己的感性認知，做了如下了解：
clear文法：
clear : none | left | right | both
取值：
none : 預設值。
left : 左側抗浮動
right : 右側抗浮動
both : 兩側抗浮動
“抗”這個拟人化的動詞的發起者是設定了
clear
屬性的元素，既形象又釋義準确。
執行個體出真知
您可以狠狠地點選這裡：clear:left/right的作用效果demo
例如上圖所示的
clear:left
作用示意：圖檔左浮動，化身魔鬼，要影響後面相鄰的元素。一般的元素都逃不了被影響被束縛的命運。除非擁有
clear
技能。例如，這裡
clear:left
左側抗浮動，也就是，左側的浮動根本就奈何不了我——我還是原原本本在下面顯示。
但是，如果圖檔是右浮動，則
clear:left
仍逃不過淪陷的命運，可以看到父級容器的高度塌陷了！
單純的
clear:left
就像是招潮蟹，一側雄起，一側不舉。
是以，考慮到通用性，在抗浮動的進行中，我們都是使用
clear:both
. 用意很明顯：我不必關心你是左浮動還是右浮動，我都通通免疫。
是以，我們才會有下面這段雕琢後的清除浮動通用CSS：
.fix { *zoom: 1; }
.fix:after { content: ''; display: table; clear: both; } 下面又有問題了，貌似我們接觸的
clear
基本上都是
both
值，似乎
left
,
right
值的出現就是雞肋，沒什麼用。真的是這樣嗎？
二、clear:left/right的實際用途
clear:left/right
最實際也是最常見的用途就是實作垂直環繞布局。
出個簡單的題目，下圖所示的布局實作，你的HTML結構會是？
哈，我猜想下，估計你會把“頭像img”和“姓名”放在同一個父級容器中，而這個父級容器左浮動；然後右側的資訊元素浮動跟随（自适應布局），對不對？
這是業界主流做法，其實是沒什麼問題的？
不過，你有沒有細細思考過這樣一個問題：“為何大家幾乎都是這種HTML結構設計？”
實際上，按照我不專業的了解，頭像、姓名、自我描述應該是平級的兄弟關系。從語義來看，貌似“頭像、姓名”硬生生變成兒子和女兒是不妥的吧~~
當我們隻知道票子放銀行錢會變多，我們就隻會存錢理财。同樣的，并不是我們不想嘗試其他的結構實作布局，而是，我們不知道方法。說穿了，就是對
clear:left/right
了解不透，不夠重視！
如何“頭像”、“姓名”、“自我描述”三兄弟平起平坐，同時達到我們想要的布局效果呢？就是借助
clear:left
, 半壁
clear
屬性配合
float
屬性可以實作“垂直環繞布局”。
何為“垂直環繞布局”？上面提供的demo中有示意：
兩個圖檔實際上都是右浮動(
float: right
)的，這種情況下，顯然，圖檔會是一行排排站。但是，如果後面一張圖檔設定了右側抗浮動聲明：
clear: right
. 則，後面一張圖檔就會落下來，形成垂直布局；加上自身的浮動特性依舊存在，于是，兩張圖檔猶如一個浮動整體。這就是典型的“垂直環繞布局”。
于是，我們如下HTML以及CSS，就有符合題目要求的新型布局方式啦！
<div style="width:500px;font-size:12px;overflow:hidden;_zoom:1;">
<span style="float:left;width:96px;...">頭像</span>
<strong style="float:left;clear:left;...">姓名</strong>
<p style="margin-left:106px;...">我是一個帥哥……</p>
</div> 頭像 姓名
我是一個帥哥……
至此，三兄弟終于平起平坐啦！
三、結語
沒睡午覺，好困哪，年輕時候，這個情境下，一定會附首打油詩，現在，不是沒有情緻，而是身體hold不住。
二十出頭狀如牛，文章夜行詩回眸。如今而立漸秃頭，結語基本打醬油。
嗯哪，希望本文的點内容能夠對您的學習有所幫助，感謝閱讀，歡迎交流！
本文為原創文章，會經常更新知識點以及修正一些錯誤，是以轉載請保留原出處，友善溯源，避免陳舊錯誤知識的誤導，同時有更好的閱讀體驗。
本文位址：http://www.zhangxinxu.com/wordpress/?p=4179