CSS中若是實現元素浮動和清除浮動，看這篇文章就足夠了
浮動基本介紹
- 在標準文檔流中元素分爲2種，
塊級元素和行內元素，若是想讓一些元素既要有塊級元素的特色也同時保留行內元素特色，只能讓這些元素脫離標準文檔流便可。 - 浮動可讓元素脫離標準文檔流，能夠實現讓多個元素排在同一行，而且能夠設置寬高度。
- 其實浮動是經過
float屬性來實現的。 float屬性值說明表：
| 屬性值 | 描述 |
|---|---|
| left | 設置元素向左浮動。 |
| right | 設置元素向右浮動。 |
右浮動實踐
- 讓咱們進入右浮動的實踐，實踐內容如：將
class屬性值爲.box1元素設置爲右浮動。 - 在進入有浮動實踐以前咱們先看看要浮動元素結構是什麼。
-
代碼塊html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮動</title>
<style>
.box{
width: 600px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
-
結果圖佈局
- 爲何結果圖是一條邊框線呢？由於在
div標籤中尚未內容呢，如今咱們將子div標籤設置寬高度爲100px像素而且添加背景顏色。 -
代碼塊ui
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮動</title>
<style>
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
-
結果圖spa
- 爲何會排列爲3行呢，由於3個
div標籤都是塊級元素。 - 如今咱們將
class屬性值爲.box1的元素設置爲右浮動。 -
代碼塊code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮動</title>
<style>
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float:right;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
-
結果圖htm
-
注意：如今咱們發現
calss屬性值爲.box元素高度變矮了，這就說明了（浮動元素它已經脫離了標準文檔流，再也不佔用空間了）、而且向右浮動，浮動到自身的父元素的邊緣位置就中止了浮動。blog
左浮動實踐
- 讓咱們進入左浮動的實踐，實踐內容如：將
class屬性值爲.box1元素設置爲左浮動。 -
代碼塊文檔
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮動</title>
<style>
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float:left;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
-
結果圖it
- 咱們先理解浮動的原理以後再解釋下
class屬性值爲.box2元素看不見的緣由。 - 如今筆者給你們看2張實踐結果圖如：
-
結果圖Atable
-
結果圖B
- 經過這2張結果圖咱們能夠把浮動簡單的理解爲「漂」舉例：
- 假設
class屬性值爲.box是一個池塘，3個子元素都是可以漂浮在池塘水面上的東西，如今咱們將calss屬性值爲.box1元素浮動起來，漂在池塘水面上，是否是就再也不佔用池塘內的空間了。 - 既然咱們理解爲「漂」它必定是漂浮在池塘水面之上，可是沒有浮動的元素在池塘水面以內，因此
class屬性值爲.box2元素看不見，並不表明它不存在只是被class屬性值爲.box1元素給遮擋住了，如今咱們將class屬性值爲.box2元素寬度設置爲150px像素。 -
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮動</title>
<style>
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float:left;
}
.box2{
width: 150px;
height: 100px;
background-color: #0f0;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
-
結果圖
-
注意：事實證實
class屬性值爲.box2元素是存在的。 - 下面咱們將
calss屬性值爲.box2元素設置爲左浮動看看有什麼不同的效果 -
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮動</title>
<style>
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float:left;
}
.box2{
width: 150px;
height: 100px;
background-color: #0f0;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
-
結果圖
- 可是
class屬性值爲.box2的元素左浮動並無左浮動到自己父元素的邊緣位置，爲何在class屬性值爲.box1後面呢？由於父元素已經有了浮動的子元素後面的子元素在浮動就浮動到前面浮動的元素以後。 - 如今咱們將
class屬性值爲.box3的元素設置爲左浮動，看看有什麼不同的效果。 -
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮動</title>
<style>
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float:left;
}
.box2{
width: 150px;
height: 100px;
background-color: #0f0;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
-
結果圖
-
注意：浮動元素浮動之後，其父元素再也不將浮動的子元素包裹在父元素以內，因此結果圖出現一條黑色的邊框線，如有不明白的看第一個實踐內容。
將行內元素設置浮動
- 若是咱們給行內元素設置了浮動，行內元素就擁有了塊級元素的特色。
- 讓咱們進入行內元素設置浮動實踐，實踐內容如：將
div標籤中的span標籤設置爲左浮動。 - 在設置左浮動以前咱們先看看給
span標籤設置寬高度和背景顏色有什麼效果。 -
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮動</title>
<style>
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="box">
<span class="box1">微笑是最初的信仰1</span>
<span class="box2">微笑是最初的信仰2</span>
<span class="box3">微笑是最初的信仰3</span>
</div>
</body>
</html>
-
結果圖
- 如今發現咱們給
span標籤設置了寬高度爲100px像素並無生效，由於如今span標籤仍是行內元素。 - 如今咱們給
span標籤設置左浮動，而後咱們在看看效果如何。 -
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮動</title>
<style>
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
float: left;
}
</style>
</head>
<body>
<div class="box">
<span class="box1">微笑是最初的信仰1</span>
<span class="box2">微笑是最初的信仰2</span>
<span class="box3">微笑是最初的信仰</span>
</div>
</body>
</html>
-
結果圖
-
注意：行內元素設置爲浮動以後就擁有了塊級元素的特色。
設置浮動總結
- 浮動的特色如：
- 浮動元素脫離了標準的文檔流，再也不佔用父元素的任何空間。
- 浮動元素比標準文檔流的元素層級要高，會將標準文檔流的元素遮擋住。
- 浮動元素會向左浮動或向右浮動。
- 浮動元素會遇到父元素的邊緣就中止了浮動。
- 浮動元素會遇到已經有了浮動的元素，後者會浮動到前者以後就中止了浮動。
- 浮動元素浮動以後就脫離了父元素，而且父元素再也不包裹浮動的元素。
- 行內元素設置爲浮動，就擁有了塊級元素的特色。
爲何要清除浮動呢？
- 由於浮動的元素會影響到下面元素，具體看實踐結果圖你們就明白了。
class屬性值爲.box元素的子類元素沒有浮動前的效果實踐。-
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>清除浮動</title>
<style>
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<h1>清除浮動</h1>
</body>
</html>
-
結果圖
class屬性值爲.box元素的子元素左浮動以後影響到下面的元素排版佈局實踐。-
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮動</title>
<style>
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<h1>清除浮動</h1>
</body>
</html>
-
結果圖
-
如今你們應該明白了爲何要清除浮動了，有浮動就必須清除浮動，由於上面的元素設置了浮動就會影響到下面元素排版佈局。
清除浮動有3種方式
第一種方式
- 給浮動的元素父元素設置一個固定的高度，從視覺上看到浮動的元素在父元素包裹以內。
- 咱們給浮動元素的父元素設置一個固定
600px像素的高度，一塊兒來看看效果如何。 -
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>清除浮動</title>
<style>
.box{
width: 600px;
height: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<h1>清除浮動</h1>
</body>
</html>
-
結果圖
-
這樣是解決了下面元素排版佈局問題，可是筆者不推薦這麼作，由於高度是由子元素的內容撐起來的高度，而不是咱們給的固定高度。
第二種方式
- 其實在
CSS中也有清除浮動的屬性，清除浮動屬性名爲clear。 clear屬性值說明表
| 屬性值 | 描述 |
|---|---|
| left | 清除左側浮動元素。 |
| right | 清除右側浮動元素。 |
| both | 清除左右側浮動元素。 |
- 要使用這個
clear屬性必須建立一個新的div元素，建立新的div元素不能放置任何內容，它只能作一個件事情，那就是清除浮動而且將這個新建立的div元素放在最後一個浮動元素的後面纔會生效。 - 左右清除浮動的屬性值筆者在這裏就不一一實踐了，通常咱們就用
both屬性值就能夠了，左右清除浮動，幹嗎還要計較它是左浮動或右浮動呢，直接清除左右浮動就ok了。 - 具體的看咱們實踐的結果圖。
-
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>清除浮動</title>
<style>
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
float: left;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="clear"></div>
</div>
<h1>清除浮動</h1>
</body>
</html>
-
結果圖
-
注意：這纔是咱們真正想要的結果，而且從視覺上來看浮動的元素包裹在父元素以內的效果。
第三種方式
- 使用屬性爲
overflow而且屬性值爲hidden來清除浮動，必須將這個屬性設置在浮動元素的父元素身上。 給你們普及下屬性爲
overflow而且屬性值爲hidden，它原意是用來將溢出的部份內容進行隱藏，可是它還能夠清除浮動。- 筆者先將內容溢出而後在隱藏溢出的內容，那咱們一塊兒來看看唄。
-
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>溢出內容進行隱藏</title>
<style>
div{
width: 100px;
height: 50px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div>
微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
</div>
</body>
</html>
-
結果圖
- 下面筆者將溢出的內容進行隱藏。
-
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>溢出內容進行隱藏</title>
<style>
div{
width: 100px;
height: 50px;
border: 1px solid #000;
overflow: hidden;
}
</style>
</head>
<body>
<div>
微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
</div>
</body>
</html>
-
結果圖
- 使用屬性爲
overflow而且屬性值爲hidden來清除浮動。 - 清除浮動以前咱們先看看結構是如何的。
-
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>清除浮動</title>
<style>
ul{
list-style: none;
}
ul li{
float: left;
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li>微笑是最初的信仰1</li>
<li>微笑是最初的信仰2</li>
<li>微笑是最初的信仰3</li>
<li>微笑是最初的信仰4</li>
<li>微笑是最初的信仰5</li>
<li>微笑是最初的信仰6</li>
<li>微笑是最初的信仰7</li>
<li>微笑是最初的信仰8</li>
</ul>
</body>
</html>
-
結果圖
-
注意：在這裏筆者尚未給浮動元素清除浮動呢，你們能夠明顯的看到
ul標籤高度爲0。 - 清除浮動實踐
-
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>清除浮動</title>
<style>
ul{
list-style: none;
overflow: hidden;
}
ul li{
float: left;
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li>微笑是最初的信仰1</li>
<li>微笑是最初的信仰2</li>
<li>微笑是最初的信仰3</li>
<li>微笑是最初的信仰4</li>
<li>微笑是最初的信仰5</li>
<li>微笑是最初的信仰6</li>
<li>微笑是最初的信仰7</li>
<li>微笑是最初的信仰8</li>
</ul>
</body>
</html>
-
結果圖
-
如今咱們很清楚的看到
ul標籤高度爲23px像素，爲何要使用：屬性爲overflow而且屬性值爲hidden來清除浮動，由於ul標籤中只能使用li標籤元素不能使用其它元素，因此屬性爲overflow而且屬性值爲hidden來清除浮動是最好不過啦。
相關文章
- 1. CSS中若是實現元素浮動，看這篇文章就足夠了
- 2. CSS：父子元素浮動分析和清除浮動
- 3. css 浮動 清除浮動
- 4. CSS清除浮動_清除float浮動
- 5. 僞元素清除浮動
- 6. CSS定位元素--浮動與清除
- 7. css 浮動和清除浮動
- 8. CSS 浮動和清除浮動
- 9. CSS中浮動與浮動清除
- 10. 20180228:CSS浮動元素與清除浮動的一點理解
- 更多相關文章...
- • ionic 浮動框 - ionic 教程
- • W3C CSS 活動 - W3C 教程
- • 三篇文章瞭解 TiDB 技術內幕——說存儲
- • 三篇文章瞭解 TiDB 技術內幕 —— 說計算
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 融合阿里雲，牛客助您找到心儀好工作
- 2. 解決jdbc(jdbctemplate)在測試類時不報錯在TomCatb部署後報錯
- 3. 解決PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE無法輸入中文
- 4. vue+ant design中關於圖片請求不顯示的問題。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解決IDEA用Maven創建的Web工程不能創建Java Class文件的問題
- 7. [已解決] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea讓java文件夾正常使用
- 9. Eclipse啓動提示「subversive connector discovery」
- 10. 帥某-技巧-快速轉帖博主文章（article_content）
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. CSS中若是實現元素浮動，看這篇文章就足夠了
- 2. CSS：父子元素浮動分析和清除浮動
- 3. css 浮動 清除浮動
- 4. CSS清除浮動_清除float浮動
- 5. 僞元素清除浮動
- 6. CSS定位元素--浮動與清除
- 7. css 浮動和清除浮動
- 8. CSS 浮動和清除浮動
- 9. CSS中浮動與浮動清除
- 10. 20180228:CSS浮動元素與清除浮動的一點理解