# css浮动基本规则

• 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,
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,
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>

div#outerBlock {
border: 1px dotted;
}

p#p1 {
border: 1px solid;
}

div#outerBlock是img元素的包含块，img元素的外边界不得超过其包含块的内边界。由于div#outerBlock元素增加了内边距padding=3em，故img元素的最右侧以及最上侧为虚线内3em。

img#image1 {
margin: 2em;
}

<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,
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,
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、浮动元素的外边界是另一浮动元素的外边界。

            <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,
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,
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>

img#image1 {
border: 1px solid;
}
img#image2 {
border: 1px solid;
}

## 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,
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,
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>

## 4、浮动元素顶端不超过当前行

<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,
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,
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>

<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,
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,
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>

## 5、clear属性

            <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,
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,
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>

• 评论

• 上一篇
• 下一篇