CSS——浮動佈局（補充）
阿新 • • 發佈：2020-12-27
CSS——浮動佈局（補充）
上次我們說到浮動佈局和定位佈局；
但浮動當時並沒有講的太清楚，所以今天來繼續說說浮動。
首先還是將最基本的盒子搞定；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#wrapper{
width 
我們首先給元素依次加上左浮效果；
#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 >_<