CSS浮動
- 浮動的特性
- float屬性
- 三個div都不浮動
- 第一個div浮動
- 第二個div浮動
- 三個div都浮動
- 浮動的父子關系
- 浮動影響父層盒子高度
- overflow屬性
- 溢位處理
- 清除浮動
浮動的特性
1.浮動主要用于使得div脫離標準檔案流，生成多列布局
2.浮動就是讓元素可以向左或向右移動，直到它的外邊距碰到其父級的內邊距或者是上一個元素的外邊距(這里指的上一個元素不管它有沒有設定浮動，都會緊挨著上一個元素）
3.浮動元素支持所有的css樣式 、內容撐開寬高 、多個元素設定浮動，寬度足夠的話，會排在一行 、脫離檔案流 、提升層級半級（也就是說：一個元素設定了浮動屬性后，下一個元素就會無視這個元素的存在，但是下一個元素中的文本內容依然會為這個元素讓出位置使自身的文本內容環繞在設定浮動元素的周圍），
注意：不管是行級還是塊級元素，如果設定了浮動屬性，該元素就變成了具有inline-block屬性的元素，
float屬性
| 屬性 | 說明 |
|---|---|
| left | 元素向左浮動 |
| right | 元素向右浮動 |
| none | 默認值，元素不浮動 |
下面我們用三個div來設定不同情況的div浮動來通過例子來理解float以及overflow，
三個div都不浮動
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.class1 {
width: 200px;
height: 100px;
background: palegreen;
}
.class2 {
width: 250px;
height: 130px;
background: gold;
}
.class3 {
width: 300px;
height: 180px;
background: red;
}
</style>
</head>
<body>
<div class="class1">我是塊級元素1，沒有設定浮動</div>
<div class="class2">我是塊級元素2，沒有設定浮動</div>
<div class="class3">我是塊級元素3，沒有設定浮動</div>
</body>
</html>
效果截圖：
在不設定浮動的情況下，三個div塊會豎著在一列顯示
第一個div浮動
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.class1 {
width: 200px;
height: 100px;
background: palegreen;
float: left
}
.class2 {
width: 250px;
height: 130px;
background: gold;
}
.class3 {
width: 300px;
height: 180px;
background: red;
}
</style>
</head>
<body>
<div class="class1">塊級元素1，設定浮動</div>
<div class="class2">塊級元素2，沒有設定浮動，塊級元素2，沒有設定浮動，塊級元素2，沒有設定浮動，塊級元素2，沒有設定浮動</div>
<div class="class3">塊級元素3，沒有設定浮動</div>
</body>
</html>
效果截圖：
故意將第二個div塊中的內容寫得多點，我們可以得出下面的結論：
1.沒有設定浮動的元素會填充浮動元素留下來的空間
2.浮動元素會和非浮動元素發生重疊，浮動元素會在圖層的最上面
3.使用浮動時，該元素會脫離檔案流，后面的元素會無視這個元素，但文本依然會為這個浮動元素讓出位置，并且元素中的文字內容會環繞在其周圍，
第二個div浮動
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.class1 {
width: 200px;
height: 100px;
background: palegreen;
}
.class2 {
width: 250px;
height: 130px;
background: gold;
float: left
}
.class3 {
width: 300px;
height: 180px;
background: red;
}
</style>
</head>
<body>
<div class="class1">塊級元素1，沒有設定浮動</div>
<div class="class2">塊級元素2，設定浮動</div>
<div class="class3">塊級元素3，沒有設定浮動</div>
</body>
</html>
效果截圖：
由此我們可以很明顯的看出：
浮動元素不會超越其前面的元素
三個div都浮動
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.class1 {
width: 200px;
height: 100px;
background: palegreen;
float: left
}
.class2 {
width: 250px;
height: 130px;
background: gold;
float: left
}
.class3 {
width: 300px;
height: 180px;
background: red;
float: left
}
</style>
</head>
<body>
<div class="class1">塊級元素1，設定浮動</div>
<div class="class2">塊級元素2，設定浮動</div>
<div class="class3">塊級元素3，設定浮動</div>
</body>
</html>
效果截圖：
瀏覽器寬度足夠時，三個div會并排排列 ，
當我們發大頁面時，瀏覽器寬度不足以容納最后一個div時，最后一個div掉下來，并且頂部不會超過倒數第二個div的底部，
浮動的父子關系
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#wrap2 {
width: 55px;
height: 90px;
border: 3px solid red;
}
.class1 {
width: 20px;
height: 40px;
background: blue;
float: left;
}
.class2 {
width: 20px;
height: 30px;
background: yellow;
float: left;
}
.class3 {
width: 20px;
height: 30px;
background: fuchsia;
float: left;
}
.class4 {
width: 20px;
height: 20px;
background: chartreuse;
float: left;
}
</style>
<title></title>
</head>
<body>
<div id="wrap2">
<div class="class1"></div>
<div class="class2"></div>
<div class="class3"></div>
<div class="class4"></div>
</div>
</body>
</html>
效果截圖：
由此我們可以得到下面的結論：
1.浮動元素不會在其浮動方向上溢位父級的包含塊 也就是說元素左浮動，其左外邊距不會超過父級的左內邊距，元素右浮動，其右外邊距不會超過父級的右內邊距 ，
2.浮動元素的位置受到同級同向浮動元素的影響 也就是說同一父級中有多個浮動元素，后一個元素的位置會受到前一個浮動元素位置的影響，他們不會相互遮擋，后一個浮動元素會緊挨著前一個浮動元素的左外邊距進行定位，如果當前空間不足，則會換行，否則會放置在前一個浮動元素的下面，
浮動影響父層盒子高度
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#wrap2 {
width: 55px;
border: 3px solid red;
}
.class1 {
width: 20px;
height: 40px;
background: blue;
float: left;
}
.class2 {
width: 20px;
height: 30px;
background: yellow;
float: left;
}
.class3 {
width: 20px;
height: 30px;
background: fuchsia;
float: left;
}
.class4 {
width: 20px;
height: 20px;
background: chartreuse;
float: left;
}
</style>
<title></title>
</head>
<body>
<div id="wrap2">
<div class="class1"></div>
<div class="class2"></div>
<div class="class3"></div>
<div class="class4"></div>
</div>
</body>
</html>
效果截圖：
由此我們可以得到下面的結論：
父元素的高度靠子元素撐開，子元素全部浮動后，均脫離檔案流，父元素高度塌陷，
overflow屬性
| overflow屬性 | 說明 |
|---|---|
| visible | 默認值，內容不會被修剪，會呈現在盒子之外 |
| hidden | 內容會被修剪，并且其余內容是不可見的 |
| scroll | 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余內容 |
| auto | 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容 |
overflow屬性的妙用：
配合著浮動父容器，解決父容器高度他塌陷的問題，
使用overflow擴展盒子高度，overflow屬性會觸發瀏覽器重新計算父元素盒子高度，
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#wrap2 {
width: 55px;
border: 3px solid red;
overflow: hidden;
}
.class1 {
width: 20px;
height: 40px;
background: blue;
float: left;
}
.class2 {
width: 20px;
height: 30px;
background: yellow;
float: left;
}
.class3 {
width: 20px;
height: 30px;
background: fuchsia;
float: left;
}
.class4 {
width: 20px;
height: 20px;
background: chartreuse;
float: left;
}
</style>
<title></title>
</head>
<body>
<div id="wrap2">
<div class="class1"></div>
<div class="class2"></div>
<div class="class3"></div>
<div class="class4"></div>
</div>
</body>
</html>
效果截圖：
溢位處理
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1{
/* 容器 */
border: solid 1px red;
height: 200px;
width: 150px;
/* overflow: visible; */
/* overflow: hidden; */
/* overflow : scroll; */
/* overflow: auto; */
overflow-x: scroll;
}
#d2{
/* 出現移除的內容*/
width: 180px;
border: solid 2px green;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">222222</div>
</div>
</body>
</html>
效果截圖：
當d2的寬度超過了父級d1的寬度時，我們可以通過設定不同的overflow屬性值來實作不同的解決辦法，我所演示的是瀏覽器會顯示滾動條以便查看其余內容，
清除浮動
| clear屬性 | 說明 |
|---|---|
| left | 在左側不允許浮動元素 |
| right | 在右側不允許浮動元素 |
| both | 在左、右兩側不允許浮動元素 |
| none | 默認值，允許浮動元素出現在兩側 |
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container{
border: solid 1px blue;
}
.class1 {
width: 200px;
height: 100px;
background: palegreen;
float: left;
}
.class2 {
width: 250px;
height: 130px;
background: gold;
float: left;
}
.class3 {
width: 300px;
height: 180px;
background: red;
float: left;
}
/* .clear{
clear: both;
} */
</style>
</head>
<body>
<div class="container">
<div class="class1">我是塊級元素1</div>
<div class="class2">我是塊級元素2</div>
<div class="class3">我是塊級元素3</div>
<div class="clear">牛哄哄的柯南牛哄哄的柯南牛哄哄的柯南牛哄哄的柯南牛哄哄的柯南</div>
</div>
</body>
</html>
沒有清除兩側浮動效果截圖：
把代碼中的這段代碼的注釋去掉，來清除兩側浮動
/* .clear{
clear: both;
} */
清除兩側浮動效果截圖：
可以很明顯的看出：
清除兩側浮動后，有擴展父級盒子高度的作用
寫作不易，讀完如果對你有幫助，感謝點贊支持！
如果你是電腦端，看見右下角的“一鍵三連”了嗎，沒錯點它[哈哈]
加油！
共同努力！
Keafmd
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/204887.html
標籤：其他
上一篇：微信小程式實作圖片下載功能