说说Float那个被埋没的志向

作者: 前端知识  发布:2019-11-14

脚踩block-level box

相对line box,block-level box就显得不屈不挠了。width:auto时其宽度始终保持占满containing block宽度的态度。但位于同一个stacking context中的浮动定位的盒子虽然和常规流中的盒子拥有相同的z-index(都是auto),但浮动定位的盒子拥有额外的优先级,导致它总位于常规流中的盒子之上。(关于分层显示的内容可参考《CSS魔法堂:你真的理解z-index吗?》)
金沙澳门官网网址 1

XHTML

<div style="float:left;border:solid 1px red;width:100px;height:50px;">float:left</div> <div style="background:#06f;width:200px;height:100px;"></div>

1
2
<div style="float:left;border:solid 1px red;width:100px;height:50px;">float:left</div>
<div style="background:#06f;width:200px;height:100px;"></div>

重叠问题

重叠问题是指两个元素再同一个位置,会出现上下重叠的问题。浮动元素如果和普通文档流发生重叠会怎么样呢?
首先浮动元素要怎么样才会发生重叠呢,设置其margin-top为负数即可。我们看看例子:
HTML代码:

XHTML

<p> <span> 在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前。 </span> <span class="overlay"> 浮动元素重叠 </span> </p>

1
2
3
4
5
6
7
8
<p>
         <span>
             在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前。
         </span>
         <span class="overlay">
             浮动元素重叠
         </span>
     </p>

CSS代码

XHTML

p { margin-top: 20px; margin-bottom: 20px; margin-left: 50px; background-color: #00ff21; width: 250px; } .overlay { float: left; height: 80px; line-height: 80px; background-color: orangered; width: 300px; margin-top: -30px; }

1
2
p { margin-top: 20px; margin-bottom: 20px; margin-left: 50px; background-color: #00ff21; width: 250px; }
.overlay { float: left; height: 80px; line-height: 80px; background-color: orangered; width: 300px; margin-top: -30px; }

效果图如下:

金沙澳门官网网址 2

浮动元素的重叠问题

如果浮动元素不设置负margin时,是这样的
金沙澳门官网网址 3

浮动元素的重叠问题

在这个例子中,可以看到p中正常流元素span的内容会显示在浮动元素上面。
我们给设置span设置背景图片试试,效果如下:
金沙澳门官网网址 4

浮动元素的重叠问题:有背景图

元素设置背景后,重叠的部分还是会显示背景

如果是span标签换成div标签会怎么样呢?
HTML代码:

XHTML

<p> <div style="background-image:url(../images/banner1.jpg)"> 在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前。 </div> <span class="overlay"> 浮动元素重叠 </span> </p>

1
2
3
4
5
6
7
8
<p>
      <div style="background-image:url(../images/banner1.jpg)">
          在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前。
      </div>
      <span class="overlay">
          浮动元素重叠
      </span>
  </p>

效果图

金沙澳门官网网址 5

浮动元素的重叠问题:块级元素有背景图

这种情况下,重叠的部分不会显示背景图片。

总结一下这两种情况的区别:
1、行内元素与浮动元素发生重叠,其边框,背景和内容都会显示在浮动元素之上
2、块级元素与浮动元素发生重叠时,边框和背景会显示在浮动元素之下,内容会显示在浮动元素之上

是”浮动闭合”还是”清除浮动”?

我想各位都看过各种版本的clearfix实现,而最简单粗暴的方式就是添加一个<div style="clear:both"></div>来清除浮动。我还听过另一个名称——”浮动闭合”,那到底两者有什么区别呢?在作区分之前我们先要明确问题的本身。
对于height:auto的容器而言,我们希望它能恰好包裹着所有子元素,但不幸的是采用浮动定位模式的子元素将不纳入父容器的高度计算当中,那就会出现子元素戳穿父容器的风险。
从之前的内容我们了解到文字和inline-level boxes会环绕Float定位的盒子,而block-level box则被它踩在脚下。但现在希望后续盒子不再与Float定位的盒子有任何瓜葛。
面对这两种需求,我们分别得出”浮动闭合”和”清除浮动”两套方案。

after伪元素

after表示子元素的后面,通过它可以设置一个具有clear的元素,然后将其隐藏

CSS

clearfix:{ zoom:1 } clearfix:after{ display:block; content:''; clear:both; height:0; visibility:hidden; }

1
2
3
4
5
6
clearfix:{
     zoom:1
}
clearfix:after{
     display:block; content:''; clear:both; height:0; visibility:hidden;
}

这种方法的远离和第一个方法一样,就是生成一个元素来清除浮动,只是这个元素是“假的”。

优点:没有额外标签,综合起来算是比较好的方法
缺点:稍显复杂,但是理解其原理后也挺简单的
推荐使用这种方法。

感谢

KB011: 浮动(Floats)
KB009: CSS 定位体系概述
CS001: 清理浮动的几种方法以及对应规范说明
CSS float浮动的深入研究、详解及拓展(一)
CSS float浮动的深入研究、详解及拓展(二)

CS001: 清理浮动的几种方法以及对应规范说明
Faking ‘float: center’ with Pseudo Elements
说说标准——CSS核心可视化格式模型(visual formatting model)之十:控制紧接浮动的排列-clear 特性
那些年我们一起清除过的浮动

打赏支持我写出更多好文章,谢谢!

打赏作者

float的应用

说了这么多float的原理和可能造成的问题,接下来我们就要谈谈float的应用。

压榨line box

金沙澳门官网网址 6
文字环绕很明显就是活生生地把文字向两边挤,为”大哥”留下个位置,而且小弟们不要走太远,必须时刻拥护着大哥。那大哥是如何圈住小弟们的呢?那得借助外力——line box。文字是以字形(glyph)的形式渲染,和它同一行的inline-level boxes均位于同一个line box中。而line box可谓是夹在containing block和浮动盒子之间勉强生存。
金沙澳门官网网址 7

XHTML

<div style="overflow:hidden;line-height:1.5;background:#06F;"> <img src="john.png" style="float:left;margin:10px"/> These days it takes a diverse and complex collection of components to power a web browser. <img src="john.png" style="float:right;margin:10px"/>It’s fair to think of all those parts coming together as a single piece of machinery, and we often talk about our web platform as an “engine”. </div>

1
2
3
4
<div style="overflow:hidden;line-height:1.5;background:#06F;">
<img src="john.png" style="float:left;margin:10px"/>
These days it takes a diverse and complex collection of components to power a web browser. <img src="john.png" style="float:right;margin:10px"/>It’s fair to think of all those parts coming together as a single piece of machinery, and we often talk about our web platform as an “engine”.
</div>

若line box的宽度不足以容纳glyph和inline-level boxes时,会在下方产生N个新的line boxes并在必要时拆分inline-level boxes,然后将glyph和inline-level boxes分布到各行的line boxes当中。

父级元素添加overflow:hidden

这个方法的关键在于触发了BFC,BFC是CSS中的难点之一,我们以后专门来学习这个概念。现在只需要知道它可以清除浮动带来的影响。

CSS

.clearfix{overflow:hidden;zoom:1}

1
.clearfix{overflow:hidden;zoom:1}

优点:代码量少,没有额外的标签

缺点:如果子元素超出父元素的范围,会造成超出的部分被隐藏

清除浮动

就是为浮动影响的范围划边界。方式也很简单,就是以一个clear:left|right|both的盒子作为边界即可,其实就是引入空隙(clearance)。
首先clear属性仅对block-level box有效clear:left表示盒子的margin-left-edge不与浮动盒子接触,而clear:right表示盒子的margin-right-edage不与浮动盒子接触,clear:both自然是左右两条margin-edge均不与浮动盒子接触啦。有点虚,直接看疗效吧!

XHTML

<div style="float:left;width:200px;height:50px;background:#06F;">float:left</div> <div style="clear:left;width:200px;height:50px;background:#F60;">clear:left</div> <div style="float:right;width:200px;height:50px;background:#06F;">float:right</div> <div style="clear:right;width:200px;height:50px;background:#F60;">clear:right</div>

1
2
3
4
<div style="float:left;width:200px;height:50px;background:#06F;">float:left</div>
<div style="clear:left;width:200px;height:50px;background:#F60;">clear:left</div>
<div style="float:right;width:200px;height:50px;background:#06F;">float:right</div>
<div style="clear:right;width:200px;height:50px;background:#F60;">clear:right</div>

金沙澳门官网网址 8

简单地说就是float:leftclear:left来清除,float:rightclear:right来清除。而我们会发现一个怪异的现象,那就是设置clear:left|right|both的盒子的border top edge紧接着Float定位盒子的margin bottom edge,其实这是clearance来作祟。当设置clear:left|right|both的盒子A的border top edge与Float定位盒子B的margin box重叠时,那么就会在A的margin box和border top edge之间引入clearance,恰好让A的的border top edge恰好不与B的margin bottom edge重叠。

XHTML

<div style="margin-bottom:50px;background:#06F;height:100px;width:200px;float:left;"></div> <div style="margin-top:50px;border: solid 10px red;height:50px;width:200px;clear:left;"></div>

1
2
<div style="margin-bottom:50px;background:#06F;height:100px;width:200px;float:left;"></div>
<div style="margin-top:50px;border: solid 10px red;height:50px;width:200px;clear:left;"></div>

金沙澳门官网网址 9

布局

float最经常使用的场景就是布局。使用float可以很简单的实现布局,而且易于理解。下面我们来实现一个三栏两列的固定布局。
HTML代码:

XHTML

<div class="header"> 我是头部 </div> <div class="content clearfix"> <div class="side">左侧</div> <div class="main"> 右侧 </div> </div> <div class="footer"> 我是底部 </div>

1
2
3
4
5
6
7
8
9
10
11
12
  <div class="header">
      我是头部
  </div>
  <div class="content clearfix">
      <div class="side">左侧</div>
      <div class="main">
          右侧
      </div>
  </div>
<div class="footer">
     我是底部
</div>

CSS代码

CSS

.clearfix: { zoom: 1; } .clearfix:after { display: block; content: ''; clear: both; height: 0; visibility: hidden; } .header, .footer { height: 50px; background: #0094ff; text-align: center; } .content { margin: 0 auto; width: 1000px; background: #000000; } .side { float: left; height: 500px; width: 280px; background: #ff006e; } .main { float: right; height: 500px; width: 700px; background: #fbcfcf; }

1
2
3
4
5
6
.clearfix: { zoom: 1; }
     .clearfix:after { display: block; content: ''; clear: both; height: 0; visibility: hidden; }
.header, .footer { height: 50px; background: #0094ff; text-align: center; }
.content { margin: 0 auto; width: 1000px; background: #000000; }
.side { float: left; height: 500px; width: 280px; background: #ff006e; }
.main { float: right; height: 500px; width: 700px; background: #fbcfcf; }

效果图

金沙澳门官网网址 10

三栏两列布局

这就是一个很常见的布局,要注意的就是清除浮动的问题。

float常见的应用大概是这几种,当然它存在着更多的应用等待着大家去挖掘,欢迎交流!!

回到顶部

浮动闭合

就是让height:auto的父容器包裹所有子元素,包括Float定位的子元素。方式很简单,就是好让父容器产生BFC。

清除浮动

清除浮动是一个经常提到的东西,首先我们要理解使用浮动会带来什么问题,以及为什么要清除浮动。
我们知道,一个块级元素如果没有设置height,其height是由子元素撑开的。对子元素使用了浮动之后,子元素会脱离标准文档流,也就是说,父级元素中没有内容可以撑开其高度,这样父级元素的height就会被忽略,这就是所谓的高度塌陷。要解决这样的问题,我们就是要使用清除浮动。
清除浮动有很多方法,下面我们一一说明每一种方法。

对于IE浏览器来说,要清除浮动带来的问题,只需要触发器hasLayout就可以,直接设置样式zoom:1就可以触发。关于hasLayout的知识,这里暂不详述,以后我们专门来讲讲这个东西,感兴趣的同学可以先查查相关资料。

对于非IE浏览器,主要有下面几种方法:

总结

重构了几次总算写完了,想写得清楚而又不哆嗦真心不易,继续努力:)

float的详细细节

在说明float带来的详细细节之前,我们首先要了解一个概念。
包含块:浮动元素的包含块就是离浮动元素最近的块级祖先元素,前面叙述的例子中,div.box就是span元素的包含块。

了解完包含块的概念之后,首先要说明的浮动元素的第一个特性:不管一个元素是行内元素还是块级元素,如果被设置了浮动,那浮动元素会生成一个块级框,可以设置它的width和height,因此float常常用于制作横向配列的菜单,可以设置大小并且横向排列。

浮动元素的展示在不同情况下会有不同的规则,下面我们来一一说明这些规则。
1.浮动元素在浮动的时候,其margin不会超过包含块的padding
这一点很简单,浮动元素的浮动位置不能超过包含块的内边界
HTML代码

XHTML

<div class="box">   <span class="rule1">   浮动元素   </span> </div>

1
2
3
4
5
<div class="box">
  <span class="rule1">
     浮动元素
  </span>
</div>

CSS代码

CSS

.box { background: #00ff90; padding: 10px; width: 500px; height: 400px; } .rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }

1
2
.box { background: #00ff90; padding: 10px; width: 500px; height: 400px; }
         .rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }

效果图

金沙澳门官网网址 11

float规则一

这个例子中,box的padding是10px,浮动元素的margin是10px,合起来为20px,即浮动元素不会超过包含块的padding。
PS:如果想要元素超出,可以设置margin属性

2.如果有多个浮动元素,后面的浮动元素的margin不会超过前面浮动元素的margin
简单说就是如果有多个浮动元素,浮动元素会按顺序排下来而不会发生重叠的现象。
修改前面例子中的HTML代码如下:

XHTML

<div class="box"> <span class="rule1"> 浮动元素1 </span> <span class="rule1"> 浮动元素2 </span> <span class="rule1"> 浮动元素3 </span> </div>

1
2
3
4
5
6
7
8
9
10
11
<div class="box">
        <span class="rule1">
            浮动元素1
        </span>
        <span class="rule1">
            浮动元素2
        </span>
        <span class="rule1">
            浮动元素3
        </span>
</div>

效果图如下:

金沙澳门官网网址 12

float规则二

如图所示,浮动元素会一个一个排序下来而不会发生重叠现象。

3.如果两个元素一个向左浮动,一个向右浮动,左浮动元素的marginRight不会和右浮动元素的marginLeft相邻。
什么意思呢,我们要分两种情况来看。
(1)包含块的宽度大于两个浮动元素的宽度总和,举例如下:
HTML代码:

XHTML

<div class="box"> <span class="rule1"> 浮动元素1 </span> <span class="rule2"> 浮动元素2 </span> </div>

1
2
3
4
5
6
7
8
<div class="box">
     <span class="rule1">
         浮动元素1
     </span>
     <span class="rule2">
         浮动元素2
     </span>
</div>

CSS代码

CSS

.box { background: #00ff90; padding: 10px; width: 500px; height: 400px; } .rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; } .rule2 { float: right; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }

1
2
3
.box { background: #00ff90; padding: 10px; width: 500px; height: 400px; }
.rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }
.rule2 { float: right; margin: 10px; padding: 10px; background: #ff6a00; width: 100px; text-align: center; }

效果图

金沙澳门官网网址 13

float规则三情况1

这种情况很简单:包含块元素的宽度足够大,两个元素一个向左浮动,一个向右浮动,井水不犯河水。

(2)包含块的宽度小于两个浮动元素的宽度总和
修改浮动元素的宽度为300px,CSS代码如下:

CSS

.rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 300px; text-align: center; } .rule2 { float: right; margin: 10px; padding: 10px; background: #ff6a00; width: 300px; text-align: center; }

1
2
.rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 300px; text-align: center; }
.rule2 { float: right; margin: 10px; padding: 10px; background: #ff6a00; width: 300px; text-align: center; }

效果图

金沙澳门官网网址 14

float规则三情况2

如果所示,如果包含块宽度不够高,后面的浮动元素将会向下浮动,其顶端是前面浮动元素的底端。

4.浮动元素顶端不会超过包含块的内边界底端,如果有多个浮动元素,下一个浮动元素的顶端不会超过上一个浮动元素的底端
这条规则简单说就是如果有多个浮动元素,后面的元素高度不会超过前面的元素,并且不会超过包含块。举例如下:
HTML代码:

XHTML

<div class="box"> <p>在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,</p> <p class="rule1"> 浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1 </p> <p>在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后</p> <p class="rule1"> 浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2 </p> </div>

1
2
3
4
5
6
7
8
9
10
<div class="box">
         <p>在浮动元素之前在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,在浮动元素之前,</p>
         <p class="rule1">
             浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1浮动元素1
         </p>
         <p>在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后在浮动元素之后</p>
         <p class="rule1">
             浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2浮动元素2
         </p>
     </div>

CSS代码

CSS

.box { background: #00ff90; padding: 10px; width: 500px; height: 400px; } .rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 250px; text-align: center; } p { margin-top: 20px; margin-bottom: 20px; }

1
2
3
.box { background: #00ff90; padding: 10px; width: 500px; height: 400px; }
.rule1 { float: left; margin: 10px; padding: 10px; background: #ff6a00; width: 250px; text-align: center; }
p { margin-top: 20px; margin-bottom: 20px; }

效果图

金沙澳门官网网址 15

float规则四

如图所示,两个浮动元素,后面的浮动元素不会超过前面的浮动元素

5.如果有非浮动元素和浮动元素同时存在,并且非浮动元素在前,则浮动元素不会不会高于非浮动元素
这条规则也是显而易见的,在第4条规则中的例子,浮动元素有一个非浮动元素p,而浮动元素没有超过它。

6.浮动元素会尽可能地向顶端对齐、向左或向右对齐
在满足其他规则下,浮动元素会尽量向顶端对齐、向左或向右对齐,在第4条规则中的例子,浮动元素会尽可能靠近不浮动的p元素,左侧对齐
金沙澳门官网网址 16

float规则六

以Normal flow为基础

不管是Absolute positioning还是Float均以Normal flow作为定位基础,也就是说先假设有一个虚拟盒子以Normal flow进行定位,然后在这个基础上添加Float的特性并影响其他盒子的布局。而浮动定位对于盒子自身而言仅影响其在水平方向上的定位,因此对于inline-level box而言其垂直方向上的定位并没有发生变化,而对于block-level box而言因Collapsing margins的失效有可能会引起垂直方向上的移动。
金沙澳门官网网址 17

XHTML

<div style="background:#0f6;width:200px;height:50px;margin-bottom:50px;"></div> <div style="background:#f06;width:200px;height:50px;margin:50px 0;"></div> <div style="background:#06F;width:200px;height:50px;margin-top:50px;float:left;">float:left</div>

1
2
3
<div style="background:#0f6;width:200px;height:50px;margin-bottom:50px;"></div>
<div style="background:#f06;width:200px;height:50px;margin:50px 0;"></div>
<div style="background:#06F;width:200px;height:50px;margin-top:50px;float:left;">float:left</div>

值得注意的是,浮动定位的虚拟盒子实际上是不占空间的。因此才有后续的浮动闭合和清除浮动的事。

文字环绕效果

float最初的应用就是文字环绕效果,这对图文并茂的文章很有用。我们简单的距离说明一下:
HTML代码

XHTML

<div class="box"> <img src="1.jpg" class="float" /> 我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字 </div>

1
2
3
4
<div class="box">
         <img src="1.jpg" class="float" />
         我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字我是环绕的文字
     </div>

CSS代码:

CSS

.box { background: #00ff90; padding: 10px; width: 500px; } .float {background: #0094ff none repeat scroll 0 0;border: 1px solid red;float: left;margin-left: 5px;width: 400px;}

1
2
.box { background: #00ff90; padding: 10px; width: 500px; }  
.float {background: #0094ff none repeat scroll 0 0;border: 1px solid red;float: left;margin-left: 5px;width: 400px;}

效果图

金沙澳门官网网址 18

文字环绕效果

这样很轻松的实现了文字环绕效果。

被埋没的志向——文字环绕

回忆一下我们一般什么时候会想用浮动呢?是多列布局还是多列布局呢:)?其实它向往的却是这个
金沙澳门官网网址 19
它想干的就是这个——文字环绕,而且CSS2中除了浮动外没有其他属性可实现上述的效果。
那到底如何理解它的实现原理呢?下面我们采取分步剖析的方式来深入探讨吧!

增加额外的div

这是最简单直接的方法,哪里有浮动元素,就在其父级元素后增加一个

金沙澳门官网网址 ,XHTML

<div style="clear:both"></div>

1
<div style="clear:both"></div>

这样就会清除浮动元素带来的问题。

优点:简单直接,初学者常常使用的方法,也易于理解
缺点:增加额外的无意义标签,不利于语义化,每次清除都要添加额外的空标签,造成浪费

切断关联看Float

‘float’
Value: left | right | none | inherit
Initial: none
Applies to: all
Inherited: no
当设置float:left后,元素对应的margin left edge会尽可能向所属的containing block的左边框靠近,若同一行中存在位于左侧的元素设置了float:left,则即会尽可能向该兄弟元素的margin right edge靠近.

XHTML

<div style="background:#06F;width:200px;height:100px;position:relative;left:20px;"> <div style="background:#1F0;width:50px;height:50px;float:right;"></div> <div style="background:#F60;width:50px;height:50px;float:right;"></div> </div>

1
2
3
4
<div style="background:#06F;width:200px;height:100px;position:relative;left:20px;">
  <div style="background:#1F0;width:50px;height:50px;float:right;"></div>
  <div style="background:#F60;width:50px;height:50px;float:right;"></div>
</div>

金沙澳门官网网址 20
(由于float:left突出不了效果,因此采用float:right作例子。其中蓝色区域就是containing block范围,绿和红色块采用向右浮动)
当设置浮动后,display:inline的实际值将被改写为display:block,因此不要再为display:inline;height:100px;line-height:0;float:left导致盒子content height为100px感到惊讶了。也不要为即使剩余空间不足以存放整个display:inline;float:left盒子,导致整个盒子下移到下一行排版而惊讶了.(若为Normal flow则会根据white-spacing、word-wrap和word-break决定盒子内部分内容换行,而不是整个盒子换行)简单来说并不是float:left让盒子具有不为五斗米折腰的气质,而是display:block的功劳,又由于浮动的盒子会以水平方向排版,因此我们可以以display:inline-block来理解浮动定位的水平排版和换行行为。

XHTML

<div style="background:#06F;width:200px;height:100px;"> <span style="background:yellow;width:100px;height:50px;float:left;">I'm span</span> <span style="background:#F01;width:110px;height:50px;float:left;">I'm span too</span> </div>

1
2
3
4
<div style="background:#06F;width:200px;height:100px;">
  <span style="background:yellow;width:100px;height:50px;float:left;">I'm span</span>
  <span style="background:#F01;width:110px;height:50px;float:left;">I'm span too</span>
</div>

金沙澳门官网网址 21
当设置浮动后,虽然display的实际值为block但就width:auto而言,我认为display更像是采用inline-block,宽度由子元素决定。这就是包裹性了!
(float:right同理,只是方向不同而已)
注意:在仅考虑浮动元素本身的前提下,float:left的效果与display:inline-block而父容器direction:ltr的效果是一样的,不同的是浮动元素不纳入父容器高度的计算当中

XHTML

<div style="border:solid 1px #06F;"> <span style="background:#F01;float:left;">float:left</span> </div> <br clear="both"/><br/> <div style="border:solid 1px #06F;"> <span style="background:#F01;display:inline-block;">float:none</span> </div>

1
2
3
4
5
6
7
<div style="border:solid 1px #06F;">
  <span style="background:#F01;float:left;">float:left</span>
</div>
<br clear="both"/><br/>
<div style="border:solid 1px #06F;">
  <span style="background:#F01;display:inline-block;">float:none</span>
</div>

金沙澳门官网网址 22

float特殊情况

前面讨论了float需要遵守的一些规则,这些规则都是在比较常见的场景下展示的结果。下面我们来讨论一些不常见的情况。

本文由金沙澳门官网发布于前端知识,转载请注明出处:说说Float那个被埋没的志向

关键词: 金沙澳门官网