(注1:如果有問題歡迎留言探討翔横,一起學習读跷!轉(zhuǎn)載請注明出處,喜歡可以點個贊哦:萄洹)
(注2:更多內(nèi)容請查看我的目錄效览。)
1.浮動的定義
浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止荡短。
由于浮動框不在文檔的普通流中丐枉,所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣。
2. 浮動的特征
2.1 脫標性
浮動元素會脫離標準文檔流掘托,根據(jù)屬性向左或右浮動瘦锹,使周圍元素重新排列。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.1-1</title>
<style>
.div1 {
background-color: green;
}
.div2 {
width: 90px;
height: 50px;
background-color: yellow;
}
.div3 {
width: 60px;
height: 30px;
background-color: red;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>
標準文檔流如上圖所示闪盔,塊級元素從上往下排列弯院。我們試著為其加上浮動屬性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.1-2</title>
<style>
.div1 {
background-color: green;
}
.div2 {
width: 90px;
height: 50px;
background-color: yellow;
}
.div3 {
width: 60px;
height: 30px;
background-color: red;
}
.fl {
float: left;
}
</style>
</head>
<body>
<div class="div1 fl">div1</div>
<div class="div2 fl">div2</div>
<div class="div3 fl">div3</div>
</body>
</html>
可以看到泪掀,元素向左漂浮听绳,寬高可以指定,若不指定族淮,默認包裹其元素內(nèi)容辫红。再來看下凭涂,浮動元素對標準文檔流元素的影響。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.1-3</title>
<style>
.div1 {
background-color: green;
}
.div2 {
width: 90px;
height: 50px;
background-color: yellow;
}
.div3 {
width: 60px;
height: 30px;
background-color: red;
}
.fl {
float: left;
}
</style>
</head>
<body>
<div>
<div class="div1">div1</div>
<div class="div2 fl">div2</div>
<div class="div3">div3</div>
</div>
</body>
</html>
可以看到贴妻,div3不是紅色切油,而且檢查div3的元素時發(fā)現(xiàn)其真實位置竟然在被div2覆蓋的地方。那么如果將div2向右浮動呢名惩?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.1-4</title>
<style>
.div1 {
background-color: green;
}
.div2 {
width: 90px;
height: 50px;
background-color: yellow;
}
.div3 {
width: 60px;
height: 30px;
background-color: red;
}
.fr {
float: right;
}
</style>
</head>
<body>
<div>
<div class="div1">div1</div>
<div class="div2 fr">div2</div>
<div class="div3">div3</div>
</div>
</body>
</html>
可以看得更明顯澎胡,div2其實是脫離標準文檔流以后覆蓋了div3。
2.2 寬高對浮動的影響
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.2-1</title>
<style>
.div1 {
width: 70px;
height: 50px;
background-color: green;
}
.div2 {
width: 90px;
height: 80px;
background-color: yellow;
}
.div3 {
width: 60px;
height: 30px;
background-color: red;
}
.div4{
width: 90px;
height: 100px;
background-color: blue;
}
.fl {
float: left;
}
</style>
</head>
<body>
<div>
<div class="div1 fl">div1</div>
<div class="div2 fl">div2</div>
<div class="div3 fl">div3</div>
<div class="div4 fl">div4</div>
</div>
</body>
</html>
我們逐步將視窗寬度變小娩鹉,可以發(fā)現(xiàn)攻谁,向左浮動時,當寬度不夠時弯予,最右邊的盒子會向下挪到挨著左邊最突出的元素或者直到父元素邊框戚宦。
2.3 文字環(huán)繞
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.3</title>
<style>
div {
background-color: green;
}
.fl {
float: left;
}
.text {
word-break: break-all;
}
</style>
</head>
<body>
<div>
<img src="2.3.png" alt="" class="fl">
<div class="text">111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
</div>
</body>
</html>
2.4 高度坍塌
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.4</title>
<style>
.outer {
border: 3px solid black;
}
.div1 {
width: 70px;
height: 50px;
background-color: green;
}
.div2 {
width: 90px;
height: 80px;
background-color: yellow;
}
.div3 {
width: 60px;
height: 30px;
background-color: red;
}
.fl {
float: left;
}
</style>
</head>
<body>
<div class="outer">
<div class="div1 fl">div1</div>
<div class="div2 fl">div2</div>
<div class="div3 fl">div3</div>
</div>
</body>
</html>
如圖所示,浮動的元素并不會撐起其父元素的高度锈嫩。這是怎么回事呢受楼?我們會在BFC中進行解釋。
3. 清除浮動
清除浮動呼寸,總體上來說艳汽,有兩種思路:
- 利用clear屬性
- 利用BFC特性
下面來看一下兩種思路各有哪些具體實現(xiàn)方案。
3.1 利用clear屬性
3.1.1 直接使用clear屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.1.1</title>
<style>
.outer {
border: 3px solid black;
}
.div1 {
width: 70px;
height: 50px;
background-color: green;
}
.div2 {
width: 90px;
height: 80px;
background-color: yellow;
}
.div3 {
width: 60px;
height: 30px;
background-color: red;
}
.fl {
float: left;
}
.clear {
clear: left;
}
</style>
</head>
<body>
<div class="outer">
<div class="div1 fl">div1</div>
<div class="div2 fl">div2</div>
<div class="div3">div3</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="outer">
<div class="div1 fl">div1</div>
<div class="div2 fl">div2</div>
<div class="div3 clear">div3</div>
</div>
</body>
</html>
可以看到对雪,如果需要清除浮動的元素與浮動元素同級河狐,可以直接在需要清除浮動的元素上添加clear屬性。
3.1.2 額外標簽清除浮動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.1.1</title>
<style>
.outer {
border: 3px solid black;
}
.div1 {
width: 70px;
height: 50px;
background-color: green;
}
.div2 {
width: 90px;
height: 80px;
background-color: yellow;
}
.div3 {
width: 60px;
height: 30px;
background-color: red;
}
.fl {
float: left;
}
.clear {
clear: left;
}
</style>
</head>
<body>
<div class="outer">
<div class="div1 fl">div1</div>
<div class="div2 fl">div2</div>
</div>
<div class="div3">div3</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="outer">
<div class="div1 fl">div1</div>
<div class="div2 fl">div2</div>
</div>
<div class="div3 clear">div3</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="outer">
<div class="div1 fl">div1</div>
<div class="div2 fl">div2</div>
<div class="clear"></div>
</div>
<div class="div3">div3</div>
</body>
</html>
可以看到瑟捣,不同級的外部元素想要清除浮動影響馋艺,如果使用直接添加clear的方法,無法解決浮動元素的高度坍塌問題蝶柿≌筛疲可以在需要清楚浮動的末尾添加一個空標簽非驮,用來清除浮動交汤。
3.1.3 :before,:after偽類清除浮動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.1.3</title>
<style>
.outer {
border: 3px solid black;
}
.div1 {
width: 70px;
height: 50px;
background-color: green;
}
.div2 {
width: 90px;
height: 80px;
background-color: yellow;
}
.div3 {
width: 60px;
height: 30px;
background-color: red;
}
.fl {
float: left;
}
.clearfix {
zoom: 1;
}
.clearfix:after{
content: '';
display: block;
clear: both;
visibility: hidden;
}
</style>
</head>
<body>
<div class="outer">
<div class="div1 fl">div1</div>
<div class="div2 fl">div2</div>
</div>
<div class="div3">div3</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="outer clearfix">
<div class="div1 fl">div1</div>
<div class="div2 fl">div2</div>
</div>
<div class="div3">div3</div>
</body>
</html>
其實原理上和添加空標簽類似劫笙。有幾點需要注意:
- zoom:1是為了兼容性芙扎,因為ie6/7不能使用偽類。
- content:' . '填大;display:block; 對于FF/Chrome/opera/IE8不能缺少戒洼,其中content()取值也可以為空。
- visibility:hidden;的作用是允許瀏覽器渲染它允华,但是不顯示出來圈浇,這樣才能實現(xiàn)清除浮動寥掐。
這種方法是兼容性最好,后續(xù)影響也是最小的磷蜀。下面提供CSS中的浮動和清除浮動召耘,梳理一下!一文歸納的該方法:
// 現(xiàn)代瀏覽器clearfix方案褐隆,不支持IE6/7
.clearfix:after {
display: table;
content: " ";
clear: both;
}
// 全瀏覽器通用的clearfix方案
// 引入了zoom以支持IE6/7
.clearfix:after {
display: table;
content: " ";
clear: both;
}
.clearfix{
*zoom: 1;
}
// 全瀏覽器通用的clearfix方案【推薦】
// 引入了zoom以支持IE6/7
// 同時加入:before以解決現(xiàn)代瀏覽器上邊距折疊的問題
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
.clearfix{
*zoom: 1;
}
3.2 利用BFC特性
為父元素添加以下屬性來觸發(fā)BFC:
- float 為 left | right
- overflow 為 hidden | auto | scorll
- display 為 table-cell | table-caption | inline-block | flex | inline-flex
- position 為 absolute | fixed
可以給父元素設置overflow:auto來簡單地實現(xiàn)BFC清除浮動污它,但是為了兼容IE最好用overflow:hidden。不過這樣元素陰影或下拉菜單會被截斷庶弃,比較局限衫贬。下面選取前兩種方法來看一下效果。
3.2.1 使父元素浮動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.2.1</title>
<style>
.outer {
border: 3px solid black;
}
.div1 {
width: 70px;
height: 50px;
background-color: green;
}
.div2 {
width: 90px;
height: 80px;
background-color: yellow;
}
.div3 {
width: 60px;
height: 30px;
background-color: red;
}
.fl {
float: left;
}
</style>
</head>
<body>
<div class="outer">
<div class="div1 fl">div1</div>
<div class="div2 fl">div2</div>
</div>
<div class="div3">div3</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="outer fl">
<div class="div1 fl">div1</div>
<div class="div2 fl">div2</div>
</div>
<div class="div3">div3</div>
</body>
</html>
這種方法歇攻,以暴制暴固惯,父元素變成浮動以后同樣需要考慮其影響和清除。
3.2.2 父元素添加屬性overflow:hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.2.2</title>
<style>
.outer {
border: 3px solid black;
}
.div1 {
width: 70px;
height: 50px;
background-color: green;
}
.div2 {
width: 90px;
height: 80px;
background-color: yellow;
}
.div3 {
width: 60px;
height: 30px;
background-color: red;
}
.fl {
float: left;
}
</style>
</head>
<body>
<div class="outer">
<div class="div1 fl">div1</div>
<div class="div2 fl">div2</div>
</div>
<div class="div3">div3</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="outer" style="overflow: hidden">
<div class="div1 fl">div1</div>
<div class="div2 fl">div2</div>
</div>
<div class="div3">div3</div>
</body>
</html>
4. 浮動的應用場景
- 文字環(huán)繞
這是浮動設計的初衷缴守。 - 多列布局
常用的多列布局缝呕,更推薦使用inline-block,當然要注意列之間的空隙斧散。但浮動也經(jīng)常用于左邊有一塊固定寬度供常,右邊根據(jù)父元素寬度自適應的情況。 - 菜單欄
同樣可以使用浮動或者inline-block實現(xiàn)鸡捐。
參考
W3cSchool
CSS浮動float詳解
CSS清浮動處理(Clear與BFC)
CSS中的浮動和清除浮動栈暇,梳理一下!
CSS篇之2. 清除浮動箍镜,什么時候需要清除浮動源祈,清除浮動都有哪些方法
CSS復習筆記二:浮動和清除浮動
徹底理解浮動float CSS浮動詳解 清除浮動的方法
經(jīng)驗分享:CSS浮動(float,clear)通俗講解
清除浮動float (:after方法)
偽類:after清除浮動的原理和方法