可视化格式模型-浮动

浮动是可视化格式模型中非常重要的一节。浮动跟stack level也有一定的关系。可视化模型是一个3维的模型,并不是二维的。元素在页面上的排列,从我们的角度看是二维的,元素的位置可以用x,y轴坐标来表示。但是,元素和元素之间的位置如果有所重叠,谁显示在前面,就涉及到另一个轴:z轴。我们经常使用的 z-index 就是如此得来的。浮动框在整个模型中,z轴坐标比常规流中的值要高,所以会飘在它上面。也可以把这个模型看作是 Photoshop中的图层,我们就好像在好多层玻璃上画框框,这些玻璃都叠在一起,我们只能透过一个窗口(浏览器可见窗口)来看这些玻璃重叠后的图画。浮动可以看作其中的一个图层。

浮动和文字环绕 浮动框就是一个框在当前行被向左或向右挪动(偏移),它不在常规流中,浮动框由浮动元素的框组成。浮动框( float, “floated” or “floating” box)最有趣的特性是内容可以沿着它的边缘渲染(或设置’clear’属性禁止此特性)。内容排列在沿着左浮动框的右边排列,而沿着右浮动框的左边排列,也就是我们常说的文字环绕效果。 请看下面的例子:

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE>Float example</TITLE>

<STYLE type="text/css">

span {

float: left

}

P {

margin: 2em;

border: 1px solid red;

width: 200px;

}

</STYLE>

</HEAD>

<BODY>

<P>

<span style="width:100px; height:100px; background-color:green; margin:20px;"></span>

The IMG box is floated to the left. The content that follows is formatted to the

right of the float, starting on the same line as the float.

</p>

</BODY>

</HTML>

提示:你可以先修改部分代码再运行。

其中,P中包含浮动的SPAN和一些文字,文字是围绕绿块的 margin 排列的。

浮动框的放置

一个浮动框,会被向左或向右偏移,直到它的外边界( outter edge,又叫margin edge ) 接触到它 包含块 的边界或另一个浮动元素的外边界( outter edge,又叫margin edge ) ,如果存在一个行框,浮动框的顶边会和当前行框的顶部对齐。

如果水平方向没有足够的空间放置浮动元素,它将向下移动,直到有足够的空间或没有更多的浮动元素为止。

浮动元素会缩短行框 由于浮动框并不在常规流中,在该浮动框之前或之后创建的非定位框垂直排列,就好象浮动框并不存在一样。然而,浮动框之后创建的行框 会被缩短,比便为浮动元素的 margin 框提供空间。如果被缩短的行框无法再容纳更多的内容,它将向下移动,直到有足够的空间或没有更多的浮动元素为止。当前行里浮动框前的任何内容,都将被重新排列到该浮动另一侧的第一个可用行里。也就是说,如果在遇到左浮动框之前,行内框被放置到行上,剩余的行框空间足够容纳该左浮动框,那么,左浮动框就会被放置在该行上,并与该行框的顶端对齐,然后,已经在行上的行内框被相应地移动到该浮动框的右侧(右侧成了该左浮动框的另一侧),反之亦然,对于 rtl 和 右浮动框也是一样。 如上图中的文字环绕的例子,包含文字的行框被缩短,是包含块减去浮动元素的 margin 宽度。其中,The content两字,分别被放到了两行,因为,一行中的剩余空间无法再容纳content。

TABLE 元素、块级替换元素、BFC元素和浮动元素 TABLE 元素、块级替换元素或者在常规流中创建了 block formatting contexts 的元素,它们的 border box 在同一个 block formatting contexts 中,一定不能覆盖任何浮动元素。如果有必要,实现工具应该通过把元素放置到前面浮动元素的下面,以清理先前说到的元素,但是,如果有足够的空间,也可以把它紧临浮动元素放置。

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE>Float example</TITLE>

<STYLE type="text/css">

#C {

margin: 2em;

border: 1px solid red;

width: 200px;

overflow: hidden;

}

</STYLE>

</HEAD>

<BODY>

<div id="C">

<div id="A" style="width:50px; height:50px; background-color:green; margin:20px; float: left;">A</div>

<div id="B" style=" width:50px; background-color:blue; overflow:hidden;">B</div>

</div>

</BODY>

</HTML>

提示:你可以先修改部分代码再运行。

上面B的宽度为50px,它和浮动元素A的包含块都是C,宽度为200px。浮动元素在放置后,还有足够的空间放置B,所以,B 被紧挨着A 的margin 框被放置。将B的宽度改为150px的话就会掉下来,但是这种方式与使用 clear 特性清除浮动不同。

适用于哪些元素 可设置给任意元素,但只适用于生成非绝对定位框的元素。对于绝对定位的元素,浮动没有任何效果。这也体现了浮动和绝对定位之间的一种平衡。

值的含义 该属性指定框应当向左右移动或者不移动。特性值有如下含义: left 该元素产生一个向左浮动的块框。内容在该框的右边排列,就是上一篇帖子中所说的文字环绕,起点是框的顶部(会受’clear’属性的影响)。 right 与left类似,框向右侧浮动,内容在该框的左侧排列,从顶部开始。 none 该框不浮动。

浮动细则

1. 对于根元素的浮动,浏览器应该当作 none 根元素无所谓是否浮动,没有实际意义。

2. 左浮动框的左外边界(margin edge)不可以出现在它包含块左边界之左。对于右浮动的元素也有类似规则 以上的话,看起来有点绕眼…… 是这么个意思,左浮动元素的左 margin 最多紧贴包含块的左边界。注意,是margin edge,不是border edge也不是content edge。

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<style type="text/css">

.sub {

width: 100px;

height: 100px;

background-color: green;

margin:0 20px;

}

</style>

<div style="width:500px; border:2px solid red; overflow:hidden;">

<div class="sub" style="float:left;">left</div>

<div class="sub" style="float:right;">right</div>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

3. 如果当前框是左浮动框,并且在源文档中存在更早生成的左浮动框,那么对于任意这些先前的框,要么当前框的左外边出现在先前框的右外边之右,要么它的顶部必须在先前框的底部之下。对于向右浮动的框也有类似的规则。 也就是说,浮动元素的定位受先前生成的浮动框的影响。后面的浮动元素,需要紧挨着先前同向浮动元素的 margin 边进行定位,如果空间不足,则折行,放置到它之前元素的下面。

例如

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<style type="text/css">

.sub {

width: 200px;

height: 100px;

background-color: green;

margin:10px;

}

</style>

<div style="width:500px; border:2px solid red; overflow:hidden;">

<div class="sub" style="float:left;">left1</div>

<div class="sub" style="float:left;">left2</div>

<div class="sub" style="float:left;">left3</div>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

如例,把left2当作当前元素,那么,它前面有left1生成的浮动框,所以,它会贴着left1的右 margin 边排列。而到left3 的时候,剩余的空间已经不能够放置它了,所以,折行放置。

4. 左浮动框的右外边不可以出现在它右侧的任何右浮动框的左外边之右。对于向右浮动的元素也有类似的规则。 注意,以上说的是右侧,不是下侧,此规则不包括左浮动框下面的右浮动框。就是说,同一行中的左浮动元素和有浮动元素不能够有互相折叠的现象。

 <!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<style type="text/css">

.sub {

width: 100px;

height: 100px;

background-color: green;

margin: 10px;

}

</style>

<div id="container" style="width:200px; overflow:hidden; border:1px solid red;">

<div class="sub" style="float:left;">left</div>

<div class="sub" style="float:right;">right</div>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

以上两个浮动元素的包含块宽度为200px,无法在一行放置,所以,右浮动元素只好折行显示了。 宽度设置成300px之后,则可以放到一行。

5. 浮动框的顶外边不能高于它包含块的顶部。当一个浮动框发生在两个margin折叠的中间时,浮动元素的定位好像它有另一个空的块级父框位于常规流中。

第一句好理解,说的是顶边不能超出包含块,跟左边右边不能超出一个道理。 后面的规则是说,当浮动框处于两个发生margin折叠的地方时,会被当作被包含在一个空的块框中,它上面和下面的margin会穿过它发生margin折叠,当它不存在。

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<style type="text/css">

div {

width: 100px;

height: 100px;

background-color: green;

color: white;

margin: 50px;

}

</style>

<div>A</div>

<div style="float:left; margin:10px; background-color: red;">O</div>

<div>B</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

以上代码中,3个 div 的包含块是初始包含块。O 处于 A 和 B 的中间,A和B在理论上应当发生margin 折叠。那么,发生了么?

6. 浮动框的顶边不可以高于源文档中先前元素产生的块框或浮动框的顶

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<style type="text/css">

div {

width: 100px;

height: 100px;

background-color: green;

color: white;

margin: 10px 0;

}

</style>

<div style="width:180px; height:auto; overflow:hidden; background:white; border:1px solid gold;">

<div style="float:left;">O</div>

<div style="float:left; background-color: blue;">A</div>

<div style="float:right; width:50px; background-color: red;">B</div>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

O、A、B都是浮动元素,O、A是做浮动元素,根据宽度计算,A应该处于O的下一行。B是右浮动浮动元素。按照标准,B浮动的时候,顶边不应高于A,因此,B不会放到O的右侧显示

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户2442861的专栏

应不应该使用inline-block代替float

CSS布局创建网站,浮动绝对占据了很大的比例.大块区域如主内容及侧边栏,以及在其中的小块区域,都可以看到浮动的影子.这里浮动是唯一的解决方案吗?

1291
来自专栏用户2442861的专栏

CSS float浮动的深入研究、详解及拓展 一 一 一 一 一 一 一 一

       我们使用float浮动做了很多其本职工作以外的事情,于是我们会混淆,我们会回看不清float真正的面目。浮动真正的意义在哪里呢?要知道这个问题的答...

841
来自专栏程序员的诗和远方

20180728_ARTS_week05

这题有点犯难,上面是 Discuss 中的一个解法,看了之后挺好理解的,要找回环字符串,就从 a 和 aa 一阶和二阶这两种形式往两边找,感觉特别巧妙。

902
来自专栏我爱编程

初识HTML5

客观地讲,没有不好的技术,只有没有用好的技术。JavaScript 的坎坷遭遇让我不禁想起了另一种被人们滥用的技术:Adobe公司研发的 Flash。

872
来自专栏MixLab科技+设计实验室

设计师会编程、程序员懂艺术之设计规范

以下为正文 UI&UX类的设计规范,不像建筑设计、工业设计那样,有比较成熟权威的设计规范。大多是各家发布的设计规范,用于自家产品、品牌的设计复用。 本文从 设计...

3956
来自专栏九彩拼盘的叨叨叨

第三届 CSS 开发者大会笔记

这次大会于 2016 年 12 月 17 日在广州的天虹酒店举办。演讲嘉宾有大漠,勾三股四等一些业界大牛们。特邀嘉宾有 Andrey Sitnik(PostCS...

1112
来自专栏HTML5学堂

如何清除浮动

如何清除浮动 大家都知道,浮动会对文档产生影响,具体来看看会对文档产生什么影响? 清除浮动后的效果: ? 未清除浮动后的效果: ? 实例代码(未清除浮动): ...

37010
来自专栏GIS讲堂

lzugis——Arcgis Server for JavaScript API之自定义InfoWindow

用过Arcgis Server for JavaScript API肯定知道InfoWIndow,你在用InfoWindow的时候会发现各种问题,例如不能完全显...

902
来自专栏星回的实验室

CSS闭合浮动

一眼望上去,满屏的float,页面内容一多了那就是天塌地陷啊。于是按照多年以前实习学会的闭合浮动

892
来自专栏Android机动车

自定义View之客服好评View

这个版本主要的任务就是完成环信客服系统的集成,上一篇文章 仿IOS下载View 也是这个版本开发需求中的一小部分,那今天介绍一下另一个小需求 客服好评。 客服好...

1075

扫码关注云+社区