說到元素的浮動，首先要明确一個概念就是包含塊(containing block)。
所謂浮動元素的包含塊，就是其最近的塊級祖先元素。我們後面會舉例來說明。
這裡關于浮動的問題，主要有以下幾點：
- 1、浮動元素的外邊界不能超過其包含塊的内邊界。
- 2、浮動元素的外邊界是另一浮動元素的外邊界。
- 3、浮動元素的頂端不能比之前出現的浮動元素的頂端更高。
- 4、浮動元素頂端不超過目前行。
- 5、clear屬性。
1、浮動元素的外邊界不能超過其包含塊的内邊界。
我們看以下代碼：
<div class="col-md-6" id="outerBlock">
<img src="images/test1.jpg" style="float:right" alt="plane" id="image1"/>
<p id="p1">Came a time remembered well,
When the strong young man of the rising sun
Heard the tolling of the great black bell.
One day in the Year of the Fox,
When the bell began to ring,
It meant the time had come for one to go
To the temple of the king.
There in the middle of the circle he stands,
Searching, seeking.
With just one touch of his trembling hand,
The answer will be found.
Daylight waits while the old man sings,
"Heaven help me!"
And then like the rush of a thousand wings,
It shines upon the One.
And the day has just begun.
One day in the Year of the Fox
Came a time remembered well,
WheOne day, in the Year of the Fox
Came a time remembered well,
When the strong young man of the rising sun
Heard the tolling of the great black bell.
One day in the Year of the Fox,
When the bell began to ring,
It meant the time had come for one to go
To the temple of the king.
There in the middle of the circle he stands,
Searching, seeking.
With just one touch of his trembling hand,
The answer will be found.
Daylight waits while the old man sings,
"Heaven help me!"
And then like the rush of a thousand wings,
It shines upon the One.
And the day has just begun. </p>
</div>
這段代碼看第來比較長，實際上隻有3個元素，最外層的
div#outerBlock
以及其中包含的
img#image1
和
p#p1
。
注意代碼第2行，我們讓
img#image1
元素向右浮動，此時，該img元素的包含塊就為
div#outerBlock
，也就是最外層的div塊。
這段代碼會呈現什麼效果呢？為了更加清晰地說明問題，我們這裡分别給
div#outerBlock
以及
p#p1
加上邊框以及内邊距：
div#outerBlock {
border: px dotted;
padding: em;
}
p#p1 {
border: px solid;
padding: em;
}
效果如下：
這裡我們可以清楚地看到
div#outerBlock
、
img#image1
以及
p#p1
三者的位置關系。
div#outerBlock
是img元素的包含塊，img元素的外邊界不得超過其包含塊的内邊界。由于
div#outerBlock
元素增加了内邊距padding=3em，故img元素的最右側以及最上側為虛線内3em。
如果我們給img元素加上2em的外邊距，可以預料到img元素右側及上側将會為虛線内5em。如下：
img#image1 {
margin: em;
}
雖然看起來img元素很像包含在實線圍起來的p元素中，事實上它的位置時依據它的包含塊——虛線确定的，隻是給img元素增加了2em的外邊距，根據浮動元素外邊界不超過其包含塊内邊界的原則，圖像的邊界将距離虛線5em。
接下來，我們做一些改變，将img元素放到
p#p1
中去，如下：
<div class="col-md-6" id="outerBlock">
<p id="p1">Came a time remembered well,
When the strong young man of the rising sun
Heard the tolling of the great black bell.
One day in the Year of the Fox,
When the bell began to ring,
It meant the time had come for one to go
To the temple of the king.
<img src="images/test1.jpg" style="float:right" alt="plane" id="image1"/>
There in the middle of the circle he stands,
Searching, seeking.
With just one touch of his trembling hand,
The answer will be found.
Daylight waits while the old man sings,
"Heaven help me!"
And then like the rush of a thousand wings,
It shines upon the One.
And the day has just begun.
One day in the Year of the Fox
Came a time remembered well,
WheOne day, in the Year of the Fox
Came a time remembered well,
When the strong young man of the rising sun
Heard the tolling of the great black bell.
One day in the Year of the Fox,
When the bell began to ring,
It meant the time had come for one to go
To the temple of the king.
There in the middle of the circle he stands,
Searching, seeking.
With just one touch of his trembling hand,
The answer will be found.
Daylight waits while the old man sings,
"Heaven help me!"
And then like the rush of a thousand wings,
It shines upon the One.
And the day has just begun. </p>
</div>
注意看第9行，将img元素插入到了p元素中間。此時，img元素的包含塊就變成了
p#p1
，頁面結果如下：
同樣是浮動元素外邊界不超過其包含塊内邊界的原則，此時圖像的邊距離實線距離為2em+3em=5em。此時的位置是根據實線确定的。
2、浮動元素的外邊界是另一浮動元素的外邊界。
關于這個問題，實際上是為了避免浮動元素彼此之間的覆寫。也就是說，如果一個向右浮動的元素，碰到了另一個浮動元素，那麼它的外邊界将是碰到的那個浮動元素的外邊界。
看下面的例子，這裡我們包含2個img元素在p塊中：
<div class="col-md-6" id="outerBlock">
<p id="p1">Came a time remembered well,
When the strong young man of the rising sun
Heard the tolling of the great black bell.
One day in the Year of the Fox,
When the bell began to ring,
It meant the time had come for one to go
To the temple of the king.
<img src="images/test1.jpg" style="float:right" alt="plane" id="image1"/>
There in the middle of the circle he stands,
Searching, seeking.
With just one touch of his trembling hand,
The answer will be found.
Daylight waits while the old man sings,
<img src="images/test1.jpg" style="float:right" alt="plane" id="image2"/>
"Heaven help me!"
And then like the rush of a thousand wings,
It shines upon the One.
And the day has just begun.
One day in the Year of the Fox
Came a time remembered well,
WheOne day, in the Year of the Fox
Came a time remembered well,
When the strong young man of the rising sun
Heard the tolling of the great black bell.
One day in the Year of the Fox,
When the bell began to ring,
It meant the time had come for one to go
To the temple of the king.
There in the middle of the circle he stands,
Searching, seeking.
With just one touch of his trembling hand,
The answer will be found.
Daylight waits while the old man sings,
"Heaven help me!"
And then like the rush of a thousand wings,
It shines upon the One.
And the day has just begun. </p>
</div>
注意看代碼的9行以及15行，這裡我們插入了2個img元素
img#image1
和
img#image2
。為了更清楚地展示以上準則，這裡給img元素加上内邊距以及邊框：
img#image1 {
padding: em;
border: px solid;
}
img#image2 {
padding: em;
border: px solid;
}
得到的效果如下：
說明一下，這裡插入内邊距是為了使邊框更加清晰地展示邊界。實際上，正如上面說的，浮動元素的外邊界是另一浮動元素的外邊界。
這裡還有一個細節問題，如果一個包含塊中有2個浮動元素，并且這2個浮動元素的外邊距寬度之和大于包含塊的寬度，那麼這2個浮動元素便隻能上下排列，如下：
3、浮動元素的頂端不能比之前出現的浮動元素的頂端更高。
這句話看起來很抽象，具體來說，假如現在有3個浮動塊。第2個塊在第1個塊的下面，那麼第3個塊的頂端就是第2個塊的頂端，而不會一直浮動到它們的包含塊的内邊界。
請看下面的代碼，我們插入3個浮動塊：
<div class="col-md-6" id="outerBlock">
<img src="images/test3.jpg" style="float:left" alt="plane" id="image1"/>
<img src="images/test4.jpg" style="float:left" alt="plane" id="image2"/>
<img src="images/test1.jpg" style="float:right" alt="plane" id="image3"/>
<p id="p1">Came a time remembered well,
When the strong young man of the rising sun
Heard the tolling of the great black bell.
One day in the Year of the Fox,
When the bell began to ring,
It meant the time had come for one to go
To the temple of the king.
There in the middle of the circle he stands,
Searching, seeking.
With just one touch of his trembling hand,
The answer will be found.
Daylight waits while the old man sings,
"Heaven help me!"
And then like the rush of a thousand wings,
It shines upon the One.
And the day has just begun.
One day in the Year of the Fox
Came a time remembered well,
WheOne day, in the Year of the Fox
Came a time remembered well,
When the strong young man of the rising sun
Heard the tolling of the great black bell.
One day in the Year of the Fox,
When the bell began to ring,
It meant the time had come for one to go
To the temple of the king.
There in the middle of the circle he stands,
Searching, seeking.
With just one touch of his trembling hand,
The answer will be found.
Daylight waits while the old man sings,
"Heaven help me!"
And then like the rush of a thousand wings,
It shines upon the One.
And the day has just begun. </p>
</div>
注意代碼的2、3、4行，我們插入了3個浮動img塊。
其中，
img#image1
向左浮動，
img#image2
向左浮動，
img#image3
向右浮動。前2個浮動塊由于寬度之和超出了它們的包含塊，它們将上下排列，第3個浮動img的上邊界是第2個浮動img的上邊界，而不是第1個！如下圖所示：
如上圖所示，第三個浮動塊img3，也就是右側的小飛機，它的上邊界不會超過在它之前的浮動元素的上邊界。也就是說，它不會一直浮動到和img1等高的位置，它的上邊界不超過img2的上邊界。
4、浮動元素頂端不超過目前行
這條規則同3的功能類似，作用在于限制浮動塊的上浮。主要針對浮動元素之前出現另一進制素的情況而言。其實上面我們也看到了，隻是沒有刻意地拿出來說。不妨舉兩種情況作為例子來說。
第一種，在一個段落裡，出現一個浮動元素。
<div class="col-md-6" id="outerBlock">
<p id="p1">Came a time remembered well,
When the strong young man of the rising sun
Heard the tolling of the great black bell.
One day in the Year of the Fox,
When the bell began to ring,
It meant the time had come for one to go
To the temple of the king.
<img src="images/test1.jpg" style="float:right" alt="plane" id="image1"/>
There in the middle of the circle he stands,
Searching, seeking.
With just one touch of his trembling hand,
The answer will be found.
Daylight waits while the old man sings,
"Heaven help me!"
And then like the rush of a thousand wings,
It shines upon the One.
And the day has just begun.
One day in the Year of the Fox
Came a time remembered well,
WheOne day, in the Year of the Fox
Came a time remembered well,
When the strong young man of the rising sun
Heard the tolling of the great black bell.
One day in the Year of the Fox,
When the bell began to ring,
It meant the time had come for one to go
To the temple of the king.
There in the middle of the circle he stands,
Searching, seeking.
With just one touch of his trembling hand,
The answer will be found.
Daylight waits while the old man sings,
"Heaven help me!"
And then like the rush of a thousand wings,
It shines upon the One.
And the day has just begun. </p>
</div>
注意以上代碼的第9行，有一個浮動元素。第4條規則的意思就是說，浮動元素的頂端不會超過其上面
To the temple of the king.
所在的行。我們具體看以上代碼的效果：
第二種情況，如果浮動元素出現在一個段落後面，那麼該浮動元素上浮将不能超過該段落的底部。如下：
<div class="col-md-6" id="outerBlock">
<p id="p1">Came a time remembered well,
When the strong young man of the rising sun
Heard the tolling of the great black bell.
One day in the Year of the Fox,
When the bell began to ring,
It meant the time had come for one to go
To the temple of the king.
There in the middle of the circle he stands,
Searching, seeking.
With just one touch of his trembling hand,
The answer will be found.
Daylight waits while the old man sings,
"Heaven help me!"
And then like the rush of a thousand wings,
It shines upon the One.
And the day has just begun.
One day in the Year of the Fox
Came a time remembered well,
WheOne day, in the Year of the Fox
Came a time remembered well,
When the strong young man of the rising sun
Heard the tolling of the great black bell.
One day in the Year of the Fox,
When the bell began to ring,
It meant the time had come for one to go
To the temple of the king.
There in the middle of the circle he stands,
Searching, seeking.
With just one touch of his trembling hand,
The answer will be found.
Daylight waits while the old man sings,
"Heaven help me!"
And then like the rush of a thousand wings,
It shines upon the One.
And the day has just begun. </p>
<img src="images/test1.jpg" style="float:right" alt="plane" id="image1"/>
</div>
我們将浮動塊放在代碼37行，處于塊級兄弟元素p的後面，它的上浮情況如何呢？
很清楚地看到，浮動元素的頂部在p元素的下方。雖然它的包含塊是虛線構成的div元素。
5、clear屬性
如果我們不希望我們的某段内容流過浮動元素，我們可以使用clear屬性，我們下面對比2種情況來看：
<div class="col-md-3" id="outerBlock">
<img src="images/test1.jpg" style="float:right" alt="plane" id="image1"/>
<p id="p1">Came a time remembered well,
When the strong young man of the rising sun
Heard the tolling of the great black bell.
One day in the Year of the Fox,
When the bell began to ring,
It meant the time had come for one to go
To the temple of the king.
There in the middle of the circle he stands,
Searching, seeking.
With just one touch of his trembling hand,
The answer will be found.
Daylight waits while the old man sings,
"Heaven help me!"
And then like the rush of a thousand wings,
It shines upon the One.
And the day has just begun.
One day in the Year of the Fox
Came a time remembered well,
WheOne day, in the Year of the Fox
Came a time remembered well,
When the strong young man of the rising sun
Heard the tolling of the great black bell.
One day in the Year of the Fox,
When the bell began to ring,
It meant the time had come for one to go
To the temple of the king.
There in the middle of the circle he stands,
Searching, seeking.
With just one touch of his trembling hand,
The answer will be found.
Daylight waits while the old man sings,
"Heaven help me!"
And then like the rush of a thousand wings,
It shines upon the One.
And the day has just begun. </p>
</div>
同樣的一段代碼，右側的p元素添加
clear:right
，這樣浮動元素将不會出現在其右側。該p塊将會被向下推，直到浮動元素的下面才會顯示。