clear:left/right 理解

weixin_34054866發表於2017-11-23

clear在w3.org官方的解釋
The clear property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box.
盒子的邊不和前面浮動盒子相鄰
因為html是上下的文件流，所以這裡的邊指的左邊和右邊

clear:left/right的實際用途（一）

clear:left/right最實際也是最常見的用途就是實現垂直環繞佈局。
下圖所示的佈局實現，HTML結構

2115111-dc785494693b949f.png
image

可能會把頭像div和姓名div放在同一個父級div1中，div1左浮動
自我描述div2右浮動。
這樣實現倒是也可以，但是頭像 姓名 自我描述按照中文意思均屬同級，而此實現方式則把頭像 姓名 作為子級。
哪如何將頭像 姓名 自我描述作為同級，實現上面的佈局呢
這個時候則要藉助 clear 實現垂直環繞佈局。

<div style="width:500px;height: 100px;background:cornsilk;font-size:12px;overflow:hidden;_zoom:1;">
    <div style="float:left;width:100px;height: 60px;background: yellow;...">頭像</div>
    <div style="float:left;clear:left;width:100px;height: 40px;background: red;...">姓名</div>
    <div style="margin-left:150px;width:300px;height: 100px;background: #C3D7E4;...">自我描述……</div>
</div>

不使用clear的時候，頭像和姓名均左浮動，所有姓名會再頭像右側，想要姓名再頭像下面，則需要clear姓名的左浮動


2115111-d8fac51e25c3df0d.png
image.png

即
使用clear的時候


2115111-dc0d22502d97df49.png
image.png

clear:left/right的實際用途（二）

由於元素浮動後脫離了文件流，所以父元素是無法根據元素來自適應的。解決此問題最常用的辦法由兩種，第一種就是在所有浮動元素後加:

<div style="clear:both;height:0px;"></div>

如圖
使用clear的


2115111-8939b1faa92f313c.png
使用clear

不使用clear


2115111-8af4363aaeec06f9.png
不使用clear

原來後邊的Clear:both;其實就是利用清除浮動來把外層的div撐開，所以有時候，我們在將內部div都設定成浮動之後，就會發現，外層div的背景沒有顯示，原因就是外層的div沒有撐開，太小，所以能看到的背景僅限於一條線。
第二種辦法，使用萬能clear：

.clearfix:after 
{ 
visibility: hidden; 
display: block; 
font-size: 0; 
content: "."; 
clear: both; 
height: 0; 
} 
* html .clearfix 
{ 
zoom: 1; 
} 
*:first-child + html .clearfix 
{ 
zoom: 1; 
}

然後在你需要自適應的元素上加上class=” clearfix”即可。
這裡邊的原理：
（1）、首先是利用:after這個偽類來相容FF、Chrome等支援標準的瀏覽器。
:after偽類IE不支援，它用來和content屬性一起使用設定在物件後的內容，例如：
a:after{content:"(link)";}
這個CSS將會讓a標籤內的文字後邊加上link文字文字。
（2）、利用“* html”這個只有IE6認識的選擇符，設定縮放屬性“zoom: 1;”實現相容IE6。
（3）、利用“*:first-child + html”這個只有IE7認識的選擇符，設定縮放屬性“zoom: 1;”實現相容IE7。

參考
準確理解CSS clear:left/right的含義及實際用途
經驗分享：CSS浮動(float,clear)通俗講解
正確理解 clear:both

相關文章