CSS浮動
阿新 • • 發佈：2020-08-03
浮動
目錄
1. 標準文件流
- 塊級元素：獨佔一行
h1~h6 p div 列表...
- 行內元素：不獨佔一行
span a img strong...
行內元素可以被包含在塊級元素中，反之，則不可以
2. display
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- display: block 塊元素 inline 行內元素 inline-block 是塊元素，但是可以內聯，在一行！（例如將列表由豎直放置改為水平放置） none 不顯示 --> <style> div{ width: 100px; height: 100px; border: 1px solid red; display: inline; } span{ width: 100px; height: 100px; border: 1px solid red; display: block; } </style> </head> <body> <div>div塊元素</div> <span>span行內元素</span> </body> </html>
這個也是實現浮動的一種方式，但是我們通常使用的是float
3. float
左右浮動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div id="father"> <div class="layer01"><img src="images/1.jpg" alt=""></div> <div class="layer02"><img src="images/2.jpg" alt=""></div> <div class="layer03"><img src="images/3.jpg" alt=""></div> <div class="layer04"> 浮動的盒子可以向左浮動，也可以向右浮動，只到它的外邊緣碰到包含框或者另一個浮動盒子為止 </div> </div> </body> </html>
div{ margin: 10px; padding: 5px; } #father{ border: 1px solid black; } /*浮動float*/ .layer01{ border: 1px dashed red; display: inline-block; float: left; } .layer02{ border: 1px dashed red; display: inline-block; float: left; } .layer03{ border: 1px dashed red; display: inline-block; float: left; } .layer04{ border: 1px dashed red; display: inline-block; float: left; }
4. 父級邊框塌陷的問題
clear
/*
clear: right; 右側不允許有浮動元素
clear: left; 左側不允許有浮動元素
clear: both; 兩側不允許有浮動元素
clear: none; 可以浮動
*/
解決方案
1. 增加父級元素的高度（不建議使用）
#father{
border: 1px solid black;
height: 800px;
}
2. 增加一個空的div標籤，清除浮動
<div id="father">
<div class="layer01"><img src="images/1.jpg" alt=""></div>
<div class="layer02"><img src="images/2.jpg" alt=""></div>
<div class="layer03"><img src="images/3.jpg" alt=""></div>
<div class="layer04">
浮動的盒子可以向左浮動，也可以向右浮動，只到它的外邊緣碰到包含框或者另一個浮動盒子為止
</div>
<div class="clear"></div>
</div>
.clear{
clear: both;
margin: 0;
padding: 0;
}
3. overflow
overflow:scroll;對超出長寬範圍的內容用滾動條
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#content{
width: 350px;
height: 300px;
overflow: scroll;
}
</style>
</head>
<body>
<div id="content">
<img src="images/1.jpg" alt="">
<p>
路透社8月3日援引英國太陽報訊息，根據一項由英國官員核可的協議，位元組跳動將把TikTok總部從北京遷至倫敦。太陽報稱，位元組跳動創始人即將宣佈近期內在倫敦成立辦公室的意向。該報另稱，此舉可能讓考慮在美國禁止TikTok的美國總統特朗普感到不安。尚未立即聯絡到TikTok對此事置評。微軟週日宣佈，將繼續就收購中國網際網路巨頭位元組跳動旗下的短視訊手機應用TikTok進行磋商，並稱計劃在9月15日前完成談判。據衛報7月20日報道，TikTok當時宣佈退出將其非中國業務總部設在英國的談判，將轉向愛爾蘭都柏林等競爭城市。
</p>
</div>
</body>
</html>
利用overflow:hidden解決父級邊框塌陷的問題
在父級元素中增加一個overflow:hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮動</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="father">
<div class="layer01"><img src="images/1.jpg" alt=""></div>
<div class="layer02"><img src="images/2.jpg" alt=""></div>
<div class="layer03"><img src="images/3.jpg" alt=""></div>
<div class="layer04">
浮動的盒子可以向左浮動，也可以向右浮動，只到它的外邊緣碰到包含框或者另一個浮動盒子為止
</div>
</div>
</body>
</html>
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px solid black;
/*此處沒有定義寬度和高度，是被內容元素支撐的，因此不會出現父級邊框塌陷的問題*/
overflow: hidden;
}
/*浮動float*/
.layer01{
border: 1px dashed red;
display: inline-block;
float: left;
}
.layer02{
border: 1px dashed red;
display: inline-block;
float: left;
}
.layer03{
border: 1px dashed red;
display: inline-block;
float: right;
}
/*
clear: right; 右側不允許有浮動元素
clear: left; 左側不允許有浮動元素
clear: both; 兩側不允許有浮動元素
clear: none; 可以浮動
*/
.layer04{
border: 1px dashed red;
display: inline-block;
float: right;
clear: both;
}
4. 父類新增一個偽類：after
在父類後新增一個空的內容，定義為塊元素，並使其兩側不允許有浮動元素
好處：避免了空的div標籤
#father:after{
content: '';
display: block;
clear: both;
}
小結（重要）
1. 浮動元素後面增加空div
簡單，但是程式碼中應該儘量避免空的div
2. 設定父元素高度
簡單，但是當元素假設有了固定的高度，就會被限制
3. overflow
簡單，下拉的一些場景應避免使用
4. 父類新增偽類:after（推薦）
寫法稍微複雜，但是沒有副作用，推薦使用
5. 對比
-
display
方向不可以控制
-
float
浮動起來會脫離標準文件流，所以要解決父級邊框塌陷的問題