CSS——浮動佈局（補充）

Miziguo發表於2020-12-27
CSS

CSS——浮動佈局（補充）

上次我們說到浮動佈局和定位佈局；
但浮動當時並沒有講的太清楚，所以今天來繼續說說浮動。

首先還是將最基本的盒子搞定；

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
     #wrapper{
     	width: 200px;
     	height:200px;
     	margin:0 auto;
     	background-color: pink;
     }
     #content{
     	width:50px;
     	height:50px;
     	background-color: black;
     	color: white;
     	
     }
     #content1{
     	width: 50px;
     	height:50px;
     	background-color: red;

     }
     #content2{
     	width:50px;
     	height:50px;
     	background-color: blue;
     }
    

	</style>
</head>
<body>
	<div id="wrapper">
		<div id="content">c</div>
		<div id="content1">1</div>
		<div id="content2">2</div>
	</div>
</body>
</html>

在這裡插入圖片描述
我們首先給元素依次加上左浮效果；

 #contentc{
     	width:50px;
     	height:50px;
     	background-color: black;
     	color: white;
     	float:left;
     	
     }
     #content1{
     	width: 50px;
     	height:50px;
     	background-color: red;
        float:left;
     }
     #content2{
     	width:50px;
     	height:50px;
     	background-color: blue;
     	float:left;
     }

在這裡插入圖片描述
圖片依次排成一排，但我們只給第一個盒子加上左浮由會出現什麼情況呢？

  #contentc{
     	width:50px;
     	height:50px;
     	background-color: black;
     	color: white;
     	float:left;
     	
     }
     #content1{
     	width: 50px;
     	height:50px;
     	background-color: red;
   
     }
     #content2{
     	width:50px;
     	height:50px;
     	background-color: blue;
     	     }

我們將1和2盒子的左浮效果去掉；
在這裡插入圖片描述
紅色盒子明顯消失了，仔細一看我們會發現藍色盒子的左上方的數字1和2重疊在一起了。
那麼為什麼會出現這種情況呢？

所謂浮動僅從字面理解它一定和漂浮有關，而這種現象便是c盒子上浮導致1盒子跑去佔據了c盒子原本的第一行，同理2盒子也是一樣，但1盒子中的內容並沒有隨著盒子一起運動。

（側檢視）
在這裡插入圖片描述
這樣大家可能更好理解。

我們給盒子2加上右浮；
在這裡插入圖片描述
很明顯盒子1確實在c盒子的下面，假如盒子1沒有在c盒子下面，那麼2盒子右浮應該並排在c的最有端，即圖上畫出來的位置。在這裡插入圖片描述
但是2並沒在其位置，所以證明了盒子1在c下面並單獨佔一行（塊狀元素的特性）;
所以大家在用浮動佈局時一定要注意一些細節。
謝謝大家——Miziguo >_<

相關文章