css浮动基本规则

原创 2016年06月11日 21:33:53

说到元素的浮动,首先要明确一个概念就是包含块(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#image1p#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;
}

效果如下:

floating1

这里我们可以清楚地看到div#outerBlockimg#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#image1img#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块将会被向下推,直到浮动元素的下面才会显示。

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/a153375250/article/details/51638232

CSS 浮动基本概念

浮动在文档布局中是一个非常重要的概念,CSS 允许浮动任何元素。 浮动的特性: 1. 浮动元素会被从正常文档流中删除,不过还是会影响文档的布局 2. 浮动元素周围的外边距不会被合并 3. 距离浮动元素...
  • u011848617
  • u011848617
  • 2017-08-08 20:54:30
  • 258

CSS浮动原理

CSS Float是网页设计最强大的灵活性功能之一。本文介绍CSS Float的基本原理和行为特征,并介绍各种浏器Float特性的Bugs。 内容 基本的浮动原理 浮动是如何进行的 ...
  • fishsoul
  • fishsoul
  • 2007-09-20 12:40:00
  • 9244

CSS浮动规则详解(推荐)

CSS中float是在一系列详细规则控制浮动元素的摆放位置,可以想象成一个氢气球在封闭盒子里漂浮的平面图。具体的规则有如下几点: 1、浮动元素的左边(右边)外边界不能超出其包含块的左边(右边)的内边...
  • dyllove98
  • dyllove98
  • 2013-05-24 21:18:43
  • 1900

CSS清除浮动的五种方式

浮动元素会影响整体的布局,但是有些情况又不得不让元素浮动来更好的构成页面,下面整理五种常用的清楚浮动的方法: (注:为了节省时间,将方法写在了class名内,看懂即可) 1,为父元素添加高度: ...
  • Manson_zh
  • Manson_zh
  • 2017-07-04 15:33:07
  • 585

CSS 浮动 float 清除浮动 clear 最容易理解的文章

首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流。如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边...
  • qq_29580525
  • qq_29580525
  • 2017-07-30 16:23:31
  • 308

高薪面试题之四.前端

你在昨天/本周学到了什么? 这段事件一直在整理有关前端的面试题目,整理这也题目,不只是为了能够学习应付即将到来的面试,更是为了补补基础知识。日常项目开发进度太快了,很多属性或者方法用了就忘,这样会造...
  • zhangchen124
  • zhangchen124
  • 2016-07-14 17:39:50
  • 1096

CSS篇之2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法

2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时候需要清除浮动?我们对元素进行了浮动(float)时,我们的元素就会脱离文档流,像一只小船一样漂流在文档之上。 在 CSS...
  • zengyonglan
  • zengyonglan
  • 2016-11-23 14:09:56
  • 3767

CSS中的三种基本的定位机制(普通流、定位、浮动)

一、普通流   普通流中元素框的位置由元素在XHTML中的位置决定。块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。   普通流就是html文档中...
  • chelen_jak
  • chelen_jak
  • 2014-12-16 17:03:46
  • 8971

css定位绝对相对定位

  • 2011年12月27日 16:31
  • 68KB
  • 下载

第二章 CSS工作原理(剖析CSS规则)

一 简述:CSS样式与HTML的关系   第 1 章我们了解了怎么通过 HTML 来创建文档结构。本章,我们来说一说 CSS 规则怎么为 HTML 添加样式,并解释层叠的工作机制——当元素的同一个样式...
  • Vivianluolita
  • Vivianluolita
  • 2016-06-22 15:08:44
  • 1974
收藏助手
不良信息举报
您举报文章:css浮动基本规则
举报原因:
原因补充:

(最多只允许输入30个字)