我們先來隨便定義三個box
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8>"
<title>浮動</title>
<style type="text/css">
.box1{
width:200px;
height:200px;
background-color: red;
}
.box2{
width:200px;
height:200px;
background-color:yellow;
}
.box3{
width:200px;
height:200px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
可以發(fā)現(xiàn)這三個box是豎著排列的置吓。因為塊元素在文檔流中是默認垂直排列的，所以這三個div自上至下依次排開颁褂。這種情況影響了我們對網(wǎng)頁的布局仆潮，我們要如何讓它可以橫向排列呢？不妨給它們都加上下面這一行語句試試儿咱。
display:inline-block;/*行內(nèi)塊元素*/
好啦它橫過來了庭砍，但是我們又發(fā)現(xiàn)一個新的問題。我們并沒有設置塊間距混埠，但是結果顯示塊與塊之間存在著間距是怎么回事呢怠缸？因為行內(nèi)塊元素可以理解為文字，div之間的空格引起的钳宪。解決方法：
<div class="box1"></div><div class="box2"></div><div class="box3"></div>
既然塊元素在文檔流里垂直排列揭北，那我們是不是可以考慮讓它脫離文檔流？因此我們可以使用float來使元素浮動吏颖。
float可選值：
1搔体、none，默認值半醉，元素默認在文檔流中排列
2疚俱、left，元素會立即脫離文檔流缩多，向頁面的左側浮動
3呆奕、Right养晋，元素會立即脫離文檔流，向頁面的右側浮動
我們把box1設一個float：right登馒；看看結果
可以看到box1向右浮動了匙握，其余塊依舊是垂直排列。元素浮動后會盡量向頁面的左上或者右上漂浮陈轿，直到遇到父元素邊框圈纺。如果浮動元素上邊是一個沒有浮動的塊元素，則浮動元素不會超過塊元素麦射。如果一行中不能容下該元素蛾娶，則會自動換行。我們把box1調(diào)寬看看結果如何
.box1{
float:left;
width:1200px;
height:200px;
background-color: red;
}
.box2{
float:left;
width:200px;
height:200px;
background-color:yellow;
}
.box3{
float:left;
width:200px;
height:200px;
background-color: green;
}
我們可以設置多種float情況看看運行結果潜秋，在此就不一一列舉了蛔琅。
我們再來看看另外一個例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8>"
<title></title>
<style type="text/css">
.box1{
width:100px;
height:100px;
background-color: red;
}
.p1{
height:200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<p class="p1"></p>
</body>
</html>
紅色塊與頂部以及兩個塊之間都存在間距，這是默認樣式導致的峻呛。加上下列語句可將其去掉罗售。
*{
margin:0;
padding:0;
}
如果我們往塊內(nèi)添加文字，浮動對文字會有什么影響呢钩述？
浮動的元素不會蓋住文字寨躁，文字會自動環(huán)繞在浮動元素的周圍，所以我們可以用這種操作實現(xiàn)文字圖片的效果牙勘。
在文檔流中职恳，子元素的寬度、高度默認占父元素的全部方面，但是當元素設置浮動后會完全脫離文檔流放钦，即寬度、高度不再是默認占父元素的全部了恭金，其高度操禀、寬度被內(nèi)容撐開。此外蔚叨，內(nèi)聯(lián)函數(shù)不可設置寬高床蜘，但是脫離文檔流后會變成塊元素，即可設置寬高蔑水。
