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块将会被向下推,直到浮动元素的下面才会显示。

版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS浮动规则详解(推荐)

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

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

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

css 清楚浮动的8种方式

清除浮动是每一个 web前台设计师必须掌握的机能。css清除浮动大全,共8种方法。 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width height 属性。而...
  • u012125579
  • u012125579
  • 2015年08月24日 10:36
  • 1545

CSS 浮动基本概念

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

体验css+div 之 实现简单浮动层的基本方法

不过这种布局对窗口尺寸的适应能力极弱,所以不得不每次考虑这次的网站做成1003还是780,而信息的呈现方式也极其死板,比如说在一个类似于list的信息汇总页面,如果用户想了解某一个item的详情,一般...
  • zhengbo0
  • zhengbo0
  • 2012年06月07日 19:10
  • 1352

CSS 浮动的16条规则——如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄

原文链接:http://blog.csdn.net/luguo0816/article/details/7265677 1.浮动元素会从文档正常流中删除,但它仍会影响布局 2.浮动非替换元...
  • u010874036
  • u010874036
  • 2016年03月22日 11:00
  • 238

CSS 浮动的16条规则——如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄

http://sishuok.com/forum/posts/list/2198.html 1.浮动元素会从文档正常流中删除,但它仍会影响布局 2.浮动非替换元素必须为其指定width...
  • luguo0816
  • luguo0816
  • 2012年02月16日 19:28
  • 3316

[知识点滴]浮动( Float )规则

[知识点滴]浮动( Float )规则浮动( Float )浮动和文字环绕 浮动框就是一个框在当前行被向左或向右挪动(偏移),它不在常规流中,浮动框由浮动元素的框组成。 浮动框( ‘floa...
  • BaiHuaXiu123
  • BaiHuaXiu123
  • 2016年09月26日 00:07
  • 1545

[知识点滴]浮动( Float )规则

[知识点滴]浮动( Float )规则浮动( Float )浮动和文字环绕 浮动框就是一个框在当前行被向左或向右挪动(偏移),它不在常规流中,浮动框由浮动元素的框组成。 浮动框( ‘floa...
  • BaiHuaXiu123
  • BaiHuaXiu123
  • 2016年09月26日 00:07
  • 1777

css 权重,浮动,精灵

  • 2017年12月26日 16:49
  • 588KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css浮动基本规则
举报原因:
原因补充:

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