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;}
以上內容為本人自行探索，難免錯漏。寫出來一方面用於交流，另一方面期盼高手過路能隨意指點兩手，指出本人理解有誤之處，不勝感激！