CSS之浮動的兩個應用
阿新 • • 發佈：2019-02-19
這裡說明兩個float 的使用場景：
但其實這是利用了浮動的破壞性，此外浮動還有個包裹性，即父元素容器的寬度與其裡面的文字長度有關，下面一個程式可以體現破壞性和包裹性。
二、
我們都知道div是塊級元素，所以一個div會佔用頁面中的一行，那麼如何使得多個div放在一行？方法有兩種：
以下分別是：父容器不夠寬以及各個div高不一致的情況，這裡程式碼不再贅述。
注意最後這種情況，div4會與div3的下邊界保持在一條線上。
- 這是float出現的本質原因，就是為了實現文字環繞效果;
- 在實際網站開發中，會經常出現多個div需放在一行的情況。
效果圖如下：<!DOCTYPE html> <html> <head> <title>文字環繞效果</title> <style type="text/css"> .box1{ width:600px; margin:0px auto; } img{ width:100px; height:70px; float:left; } </style> </head> <body> <div class="box1"> <img src="BaiduLogo.jpg" /> <p>這是百度的Logo圖片這是百度的Logo圖片這是百度的Logo圖片這是百度的Logo圖片這是百度的Logo圖片這是百度的Logo圖片這是百度的Logo圖片這是百度的Logo圖片這是百度的Logo圖片這是百度的Logo圖片這是百度的Logo圖片這是百度的Logo圖片這是百度的Logo圖片這是百度的Logo圖片這是百度的Logo圖片這是百度的Logo圖片這是百度的Logo圖片這是百度的Logo圖片這是百度的Logo圖片這是百度的Logo圖片這是百度的Logo圖片這是百度的Logo圖片這是百度的Logo圖片這是百度的Logo圖片這是百度的Logo圖片這是百度的Logo圖片這是百度的Logo圖片這是百度的Logo圖片</p> </div> </body> </html>
但其實這是利用了浮動的破壞性，此外浮動還有個包裹性，即父元素容器的寬度與其裡面的文字長度有關，下面一個程式可以體現破壞性和包裹性。
效果如下：<!DOCTYPE html> <html> <head> <title>CSS浮動效果</title> <style type="text/css"> .btn{ display:inline-block; border:1px solid black; background-color:#CCCCCC; } .btn1{ float:left; border:1px solid black; background-color:#CCCCCC; } </style> </head> <body> <div class="btn"> 按鈕 </div> <span>包裹功能：即div容器的寬度隨裡面文字的長度而變化</span> <p>inline-block可以實現包裹</p> <div class="btn1"> 按鈕2 </div> <span>Float也有包裹功能</span> <p>但是float:left會影響到標準流中其他的元素的佈局，即浮動的破壞性</p> <div class="btn"> 按鈕 </div> <span>包裹功能：即div容器的寬度隨裡面文字的長度而變化</span> <div class="btn1"> 按鈕2 </div> <span>Float也有包裹功能</span> </body> </html>
二、
我們都知道div是塊級元素，所以一個div會佔用頁面中的一行，那麼如何使得多個div放在一行？方法有兩種：
- 設定div的樣式如下：
div{
display:inline;
}
float：left; /*應用此樣式的元素會向左邊和上邊去靠，直到遇到邊界為止。*/
/*float:right*/
3.css程式碼如下：<!DOCTYPE html> <html> <head> <title>浮動相關</title> <link rel="stylesheet" type="text/css" href="3.css"> </head> <body> <div class="div1"> <div class="b1"> div1 </div> <div class="b2"> div2 </div> <div class="b3"> div3 </div> <div class="b4"> div4 </div> </div> </body> </html>
/*初始化*/
body{
margin: 0px;
padding:0px;
}
/*大盒子樣式*/
.div1{
margin-left:20px;
margin-top:20px;
width:950px;
height:1000px;
padding:20px;
border:1px solid blue;
}
/*小盒子樣式*/
.b1{
width:200px;
height:200px;
float: left;
border:1px solid red;
}
.b2{
width:200px;
height:200px;
float: left;
border:1px solid red;
}
.b3{
width:200px;
height:200px;
float: left;
border:1px solid red;
}
.b4{
width:200px;
height:200px;
float: left;
border:1px solid red;
}
以下分別是：父容器不夠寬以及各個div高不一致的情況，這裡程式碼不再贅述。
注意最後這種情況，div4會與div3的下邊界保持在一條線上。