CSS 的 Float（浮動），會使元素向左或向右移動鸽素，其周圍的元素也會重新排列褒繁。
包含塊：
在說明float帶來的詳細(xì)細(xì)節(jié)之前，我們首先要了解一個概念馍忽。
包含框：浮動元素的包含框就是離浮動元素最近的塊級祖先元素
<div class="box">
<span class="float-ele">
浮動元素
</span>
普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流普通文檔流
</div>
.box { background: #00ff90; padding: 10px; width: 500px; }
.float-ele { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }
div.box就是span元素的包含塊
span外面的文字將會圍繞在span周圍
元素的水平方向浮動棒坏，意味著元素只能左右移動而不能上下移動。一個浮動元素會盡量向左或向右移動遭笋，直到它的外邊緣碰到包含塊或另一個浮動框的邊框為止（邊框為盒子模型邊框俊抵，考慮padding，margin等因素）坐梯。浮動元素之后的文字和圖片等內(nèi)聯(lián)元素元素將圍繞它。(即使浮動元素是塊元素刹帕，也是圍繞它吵血，比如上例中把span改成div，效果一樣)
浮動元素會脫離文檔流偷溺，除內(nèi)聯(lián)元素外,其他元素會填充浮動元素原來的位置（類似position里的absolute）蹋辅，除非用clear清除，（但是周邊的文字不會填充原來的文字挫掏，會圍繞在它周邊）浮動元素之前的元素將不會受到影響侦另。
請看以下例子對應(yīng)的效果圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
background: #00ff90;
padding: 10px;
width: 500px;
}
.float-ele {
float: left;
margin: 10px;
padding: 10px;
background: #ff6a00;
width: 100px;
text-align: center;
}
.test {
border: 5px solid red;
height: 100px;
width: 200px;
}
</style>
</head>
<body>
<div class="box">
<span class="float-ele">
浮動元素
</span>
<div class="test">fdsaf</div>
</div>
</body>
</html>
- 彼此相鄰的浮動元素
如果你把幾個浮動的元素放到一起，如果有空間的話尉共，它們將彼此相鄰褒傅。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>
<body>
<h3>圖片庫</h3>
<p>試著調(diào)整窗口,看看當(dāng)圖片沒有足夠的空間會發(fā)生什么。</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>
如果不設(shè)置margin袄友，圖片將緊緊相鄰殿托，沒有空隙
第一行的圖片總寬度超過了包含塊的寬度將自動換行，盡量使自己繪制在包含快的內(nèi)部
- 清除浮動：使用 clear
元素浮動之后剧蚣，周圍的元素會重新排列支竹，為了避免這種情況旋廷，使用 clear 屬性。
clear 可以讓元素（指定了clear屬性的元素）兩側(cè)的浮動元素失去對自己的作用(只對此元素失去作用礼搁，對其他元素還是維持原來的作用)饶碘，兩側(cè)的浮動元素本身還是原來的浮動效果
使用 clear 屬性往文本中添加圖片廊：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line
{
clear:both;
margin-bottom:2px;
}
</style>
</head>
<body>
<h3>圖片庫</h3>
<p>試著調(diào)整窗口,看看當(dāng)圖片沒有足夠的空間會發(fā)生什么。.</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>
- 綜合樣例：
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
<div class="div5">div5</div>
<div class="div6">div6</div>
</body>
</html>
test.css
div{
width: 300px;
height: 300px;
border: 1px solid black;
}
.div1{
float: left;
}
上例中馒吴，div1浮動到左側(cè)扎运，脫離了文檔流，div2會覆蓋div1原來的位置募书，div2例的文字“div2”會圍繞在div1周邊
修改test.css:
div{
width: 300px;
height: 300px;
border: 1px solid black;
}
.div1{
float: left;
width: 150px;
height: 150px;
}
.div2{
float: left;
width: 150px;
height: 150px;
clear: both;
}
clear 可以讓元素（指定了clear屬性的元素）兩側(cè)的浮動元素失去對自己的作用(只對此元素失去作用绪囱，對其他元素還是維持原來的作用)，兩側(cè)的浮動元素本身還是原來的浮動效果
div2的clear讓div1的浮動失去對自己的作用（本來div2要填充div1）莹捡，所以div2另起一行
div2的clear對div3并沒有效果鬼吵，所以，div3會填充div1和div2原來的位置
如果對div3設(shè)置clear:both篮赢，div2去掉clear:both齿椅，div1和div2會并排一行，div3另起一行启泣，排到div1和div2后面
如果相鄰元素是左浮動涣脚， clear:both和clear:left功能一樣，因為右邊的元素不會對自己產(chǎn)生作用
以下div3的clear:both和clear:left效果一樣
div{
width: 300px;
height: 300px;
border: 1px solid black;
}
.div1{
float: left;
width: 150px;
height: 150px;
background: green;
}
.div2{
float: left;
width: 150px;
height: 150px;
background: green;
}
.div3{
background: red;
float: left;
clear: left;
}
.div4{
float: left;
}
右浮動的例子
div{
width: 300px;
height: 300px;
border: 1px solid black;
}
.div1{
float: right;
width: 150px;
height: 150px;
background: green;
}
.div2{
float: right;
width: 150px;
height: 150px;
background: green;
}
.div3{
background: red;
float: right;
}
.div4{
float: right;
}
div3加上clear:right
clear:left對div3沒有作用
- 注意：內(nèi)聯(lián)元素使用clear沒有效果寥茫，clear只支持塊元素,內(nèi)聯(lián)元素本身可以float
下例中div會覆蓋span遣蚀，但是div中的文字會緊挨著span的文字
<body>
<span style="float: left ">fdafsdf</span>
<div>It works!</div>
</body>
