塊元素在文件流中預設垂直排列，所以這個三個div自上至下依次排開，如果希望塊元素在頁面中水平排列，可以使塊元素脫離文件流。
使用float來使元素浮動，從而脫離文件流
可選值：
none，預設值，元素預設在文件流中排列。
left，元素會立即脫離文件流，向頁面的左側浮動。
right，元素會立即脫離文件流，向頁面的右側浮動。
當為乙個元素設定浮動以後（float屬性是乙個非none的值），元素會立即脫離文件流，元素脫離文件流以後，它下邊的元素會立即向上移動；
元素浮動以後，會盡量向頁面的左上或這是右上漂浮，直到遇到父元素的邊框或者其他的浮動元素；
如果浮動元素上邊是乙個沒有浮動的塊元素，則浮動元素不會超過塊元素；
浮動的元素不會超過他上邊的兄弟元素，最多最多一邊齊；
浮動的元素不會蓋住文字，文字會自動環繞在浮動元素的周圍，所以我們可以通過浮動來設定文字環繞的效果；
在文件流中，子元素的寬度預設佔父元素的全部；
開啟span的浮動，內聯元素脫離文件流以後會變成塊元素。
w3school上面有比較具體的講解：
demo:
doctype html效果圖：>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>
title
>
<
style
type
="text/css"
>
/*預設值。元素不浮動，並會顯示在其在文字**現的位置。
*/.box4
/*規定應該從父元素繼承 float 屬性的值。
*/.box1
/*元素向左浮動。
*/.box2
/*元素向右浮動。
*/.box3
style
>
head
>
<
body
>
<
div
class
="box1"
>box1
div>
<
div
class
="box2"
>box2
div>
<
div
class
="box3"
>box3
div>
<
div
class
="box4"
>box4
div>
body
>
html
>
/*規定應該從父元素繼承 float 屬性的值。
*/.box1
/*元素向左浮動。
*/.box2
/*元素向右浮動。
*/.box3
style
>
head
>
<
body
>
<
div
class
="box1"
>box1
div>
<
div
class
="box2"
>box2
div>
<
div
class
="box3"
>box3
div>
<
p>
山不在高，有仙則名。水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青。談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子雲：何陋之有？
p>
body
>
html
>
doctype html效果：>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>
title
>
<
style
type
="text/css"
>
/*規定應該從父元素繼承 float 屬性的值。
*/.box1
/*元素向左浮動。
*/.box2
/*元素向右浮動。
*/.box3
style
>
head
>
<
body
>
<
div
class
="box1"
>box1
div>
<
div
class
="box2"
>box2
div>
<
div
class
="box3"
>box3
div>
<
p>
山不在高，有仙則名。水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青。談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子雲：何陋之有？
p>
body
>
html
>
demo3驗證開啟span的浮動，內聯元素脫離文件流以後會變成塊元素：
doctype html看下效果：>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>
title
>
<
style
type
="text/css"
>
*.div1
.span1
style
>
head
>
<
body
>
<
div
class
="div1"
>div
div>
<
span
class
="span1"
>span
span
>
body
>
html
>
前端學習筆記 CSS 清除浮動
我們前面說過，浮動本質是用來做一些文字混排效果的，但是被我們拿來做布局用，則會有很多的問題出現，但是，你不能說浮動不好 由於浮動元素不再占用原文件流的位置，所以它會對後面的元素排版產生影響，為了解決這些問題，此時就需要在該元素中清除浮動。準確地說，並不是清除浮動，而是清除浮動後造成的影響 如果浮動一...
前端學習筆記（六）CSS浮動
頁面布局方式主要包含 文件流 常規流 浮動流 脫離文件流 文件流 文件流中元素框的位置由元素在html中的位置決定，塊級元素從上到下依次排列，框之間垂直距離由框的垂直margin計算得到，行內元素在一行中水平布置。文件流就是html文件中的元素如塊級元素 行內元素依據他們的顯示屬性按照在文件中的先後...
WEB前端學習 CSS定位浮動,列表
1 概念 頁面上的元素，應該出現的位置。2 分類 普通定位 浮動定位 float，相對定位 relative，在原地上下浮動 絕對定位 absoluate，固定定位 fixed3 定位詳解 1 普通劉定位 又稱文件流定位，就是頁面中元素預設的顯示方式。2 浮動定位 解決問題 能夠讓多個塊級元素在一行...