html+css浮動float三種特性
阿新 • • 發佈:2018-12-21
浮動float:承接上一篇文章的BFC內容,浮動讓元素塊級格式化,同時元素具備三種浮動特性。
1、脫離文件流:這裡做個實驗,box1為寬高100px的盒子,box2為寬高200px的盒子,正常情況下如下圖
給box1float:left;之後:
可以看到box1脫離了文件流,box2上移,程式碼如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body,div{margin: 0;padding: 0;} .box1{float:left; width: 100px;height: 100px;background-color: blue;} .box2{width: 200px;height: 200px;background-color: red;} </style> </head> <body> <div class="box1"></div> <div class="box2">這是一段測試文字</div> </body> </html>
細心的讀者應該注意到,box2上移後,文字位置改變,即box1沒有遮住文字顯示效果,
2、文字環繞:float在被瀏覽器設定之初的目的就包含文字環繞圖片效果,這裡把box2寬高設定比box1小,可以看到,文字仍舊沒有被遮擋。
box2寬高50px,給box1設定透明度opacity為0.8,可見文字在box1的下方仍舊以box2規定的文字格式顯示。
3、浮動方向:浮動有左右浮動之分,同方向浮動元素浮動影響浮動方向,不同方向浮動元素互不影響,設定以下實驗程式碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body,div{margin: 0;padding: 0;} .box{width: 200px;height: 400px;background-color: gray;} .box1{float:left;width: 100px;height:100px;background-color: green;} .box2{float:left;width: 100px;height:200px;background-color: yellow;} .box3{float:left;width: 100px;height:100px;background-color: red;} </style> </head> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </body> </html>
效果如圖,
這裡box3浮動到左邊後沒有繼續上浮,因為box2的高度佔據的空間阻擋了box3上浮,聯絡BFC特性,box3上層元素的高度由最高的元素高度撐起,即box2的高度。
在這裡,將box2的float:left;改為float:right;效果發生變化:
以上即浮動三種特性,需要注意的是浮動脫離文件流後自成BFC,就不再撐起父元素高度。
這裡推薦兩種清除浮動對父元素影響的方法(更多方法各有優缺點,請網上查閱):
1、父元素設定高度(在父元素高度確定的情況下);
2、父元素運用偽類:
.clearfix:after{content:"";clear: both;display: block;height: 0px;visibility: hidden;} .clearfix {*zoom: 1;}
以上內容為本人自行探索,難免錯漏。寫出來一方面用於交流,另一方面期盼高手過路能隨意指點兩手,指出本人理解有誤之處,不勝感激!