對於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屬性的元素,既形象又釋義準確。
想必屬性both大家都知道,而clear:left/right最實際也是最常見的用途就是實現垂直環繞佈局。比如實現下面佈局:
哈,我猜想下,估計你會把“頭像img”和“姓名”放在同一個父級容器中,而這個父級容器左浮動;然後右側的信息元素浮動跟隨(自適應佈局),對不對?
這是業界主流做法,其實是沒什麼問題的?其實還有一種,本人認爲更加語義化。
下面是我自己寫的源碼,方便大家一起研究和討論:
<head> <style> .panel{ width:600px;margin:50px auto 20px;border:1px solid blue; background:#F5F5F5} .left{float:left} .main{ width:50%;height:60px; background: #FFE3D7;} .side { width: 20%; background: lightblue; } .panel:after {content:'';display:table;clear:both;} .panel {*zoom: 1; } </style> </head> <body> <!--clear:both的實現--> <div class="panel"> <div class="main left"> 我是浮動的,父輩管不了我! </div> <div class="side left"> 我也是浮動的! </div> </div> <!--clear:left/right的實現--> <div style="width:600px;overflow:hidden; _zoom:1"> <div style="float:left"> <span style="width:100px;height:100px;background:blue;display:block">圖片</span> <strong>姓名</strong> </div> <p style="margin-left:110px">我是大學生</p> </div> <div style="width:600px; _zoom:1"> <span style="width:100px;height:100px;background:blue; float:left;">圖片</span> <strong style="float:left;clear:left">姓名</strong> <p style="margin-left:110px">我是大學生</p> </div> </body>