CSS Float(浮動(dòng))
CSS Float(浮動(dòng))
什么是 CSS Float（浮動(dòng)）？
CSS 的 Float（浮動(dòng)），會(huì)使元素向左或向右移動(dòng)，其周?chē)脑匾矔?huì)重新排列。
Float（浮動(dòng)），往往是用于圖像，但它在布局時(shí)一樣非常有用。
元素怎樣浮動(dòng)
元素的水平方向浮動(dòng)，意味著元素只能左右移動(dòng)而不能上下移動(dòng)。
一個(gè)浮動(dòng)元素會(huì)盡量向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>
浮動(dòng)元素之后的元素將圍繞它。
浮動(dòng)元素之前的元素將不會(huì)受到影響。
CSS float 浮動(dòng)屬性
本篇主要介紹float屬性：定義元素朝哪個(gè)方向浮動(dòng)。
1. 頁(yè)面布局方式：介紹文檔流、浮動(dòng)層以及float屬性。
2. float:left ：介紹float為 left 時(shí)的布局方式。
3. float:right ：介紹float為 right 時(shí)的布局方式。
4. 相鄰元素含有float屬性：介紹相鄰元素含有float屬性時(shí)的布局方式。
1. 頁(yè)面布局方式
頁(yè)面布局方式，主要包含：文檔流、浮動(dòng)層、float屬性。
1.1 文檔流
HTML頁(yè)面的標(biāo)準(zhǔn)文檔流(默認(rèn)布局)是：從上到下，從左到右，遇塊(塊級(jí)元素)換行。
1.2 浮動(dòng)層
浮動(dòng)層：給元素的float屬性賦值后，就是脫離文檔流，進(jìn)行左右浮動(dòng)，緊貼著父元素(默認(rèn)為body文本區(qū)域)的左右邊框。
而此浮動(dòng)元素在文檔流空出的位置，由后續(xù)的(非浮動(dòng))元素填充上去：塊級(jí)元素直接填充上去，若跟浮動(dòng)元素的范圍發(fā)生重疊，浮動(dòng)元素覆蓋塊級(jí)元素。內(nèi)聯(lián)元素：有空隙就插入。
1.3 float 屬性介紹
① left ：元素向左浮動(dòng)。
?、?right ：元素向右浮動(dòng)。
?、?none ：默認(rèn)值。
?、?inherit ：從父元素繼承float屬性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2.3-float屬性</title>
<style type="text/css">
#a
{
background-color:Red;
height:50px;
width:100px;
}
#b
{
background-color:Yellow;
height:50px;
width:200px;
}
#c
{
background-color:Blue;
height:50px;
width:300px;
}
#d
{
background-color:Gray;
height:50px;
width:400px;
}
</style>
</head>
<body>
<div id=a >div-a</div>
<div id=b>div-b</div>
<div id=c>div-c</div>
<input type="text" value="input1" />
<input type="text" value="input2" />
<input type="text" value="input3 " />
<div id=d>div-d</div>
<input type="text" value="input4 " />
</body>
</html>
