1、浮動是css中重要的概念，浮動涉及到左浮動、右浮動、清除浮動。
如：我們沒有浮動之前是這樣的：
代碼：html:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="float.css">
<title>浮動練習</title>
</head>
<body>
<div class="fdiv">
<div class="div1" id="special">div1</div>
<div class="div1">div2</div>
<div class="div1">div3</div>
<div>
</body>
</html>
css檔案:
/*
body{
border:1px solid red;
width:500px;
height:500px;
margin:0px auto;
}
*/
.fdiv{
border:1px solid red;
width:500px;
}
.div1{
border:1px solid blue;
background:pink;
width:100px;
height:80px;
margin:5px 0px 5px 5px;;
}
/*
#special{
float:right;
}*/
a、右浮動：指一個元素像右移動，讓出自己的空間，像右移動直到碰到包含它的父元素最右的邊緣。
出現這個效果主要改下css檔案 （把div1的id選取器注釋去掉）：
/*
body{
border:1px solid red;
width:500px;
height:500px;
margin:0px auto;
}
*/
.fdiv{
border:1px solid red;
width:500px;
}
.div1{
border:1px solid blue;
background:pink;
width:100px;
height:80px;
margin:5px 0px 5px 5px;;
}
#special{
float:right;
}
b、左浮動：把元素都向左移動
如果高度不一樣，則向下移動的時候會被卡住，向後面有足夠空間讓其擺放，如沒有就會換一行進行擺放。
現在我們可以這樣理解浮動：
如果一個元素要左/右浮動，1、它本身也像左/右移動，知道碰到邊框或者碰到其他浮動元素（特別提示：浮動對塊元素和行內元素同樣有效）
2、元素向左/右浮動，就相當與讓出自己的左/右邊，別的元素就在它的左/右邊排列
c、清除浮動：後期中學習了再補上
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
