说到元素的浮动，首先要明确一个概念就是包含块(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: 1px dotted;
padding: 3em;
}
p#p1 {
border: 1px solid;
padding: 3em;
}效果如下：
这里我们可以清楚地看到div#outerBlock、img#image1以及p#p1三者的位置关系。
div#outerBlock是img元素的包含块，img元素的外边界不得超过其包含块的内边界。由于div#outerBlock元素增加了内边距padding=3em，故img元素的最右侧以及最上侧为虚线内3em。
如果我们给img元素加上2em的外边距，可以预料到img元素右侧及上侧将会为虚线内5em。如下：
img#image1 {
margin: 2em;
}
虽然看起来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: 2em;
border: 1px solid;
}
img#image2 {
padding: 2em;
border: 1px 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块将会被向下推，直到浮动元素的下面才会显示。
时间： 2024-10-06 10:00:21