浮动从何而来我们为何要清除浮动清除浮动的原理是什么资源-CSDN文库

139 浏览量 2021-01-19 21:06:50 上传评论收藏 126KB PDF 举报

资源推荐

资源详情

资源评论

浮动从何而来浮动从何而来我们为何要清除浮动我们为何要清除浮动清除浮动的原理是什么清除浮动的原理是什么

浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局；恨，浮动之后遗留下来太多的问题需要解

决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问，浮动从何而来？我们为何

要清除浮动？清除浮动的原理是什么？本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。

一、清除浮动一、清除浮动还是还是闭合浮动闭合浮动（（Enclosing float or Clearing float）？）？

很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代

码，也能更好地帮助我们理解开头的三个问题。

1）清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；

2）闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。

两者的区别请看优雅的 Demo

通过以上实例发现，其实我们想要达到的效果更确切地说是闭合浮动，而不是单纯的清除浮动，在footer上设置clear：both清

除浮动并不能解决warp高度塌陷的问题。

结论：用闭合浮动比清除浮动更加严谨，所以后文中统一称之为：闭合浮动。

二、为何要清除浮动？二、为何要清除浮动？

要解答这个问题，我们得先说说CSS中的定位机制：普通流，浮动，绝对定位（其中"position:fixed" 是 "position:absolute" 的

一个子类）。

1）普通流：很多人或者文章称之为文档流或者普通文档流，其实标准里根本就没有这个词。如果把文档流直译为英文就是

document flow ，但标准里只有另一个词，叫做普通流（normal flow)，或者称之为常规流。但似乎大家更习惯文档流的称

呼，因为很多中文翻译的书就是这么来的。比如《CSS Mastery》，英文原书中至始至终都只有普通流 normal flow（普通

流）这一词，从来没出现过document flow （文档流）

2）浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当

一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动

框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名

思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。

正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度

为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。

绝对定位就不多说了，不在本文讨论范围之内，下回分解。

三、清除浮动的原理三、清除浮动的原理——了解了解 hasLayout 和和 Block formatting contexts

先看一下清理浮动的各种方法：

1）添加额外标签

这是在学校老师就告诉我们的一种方法，通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，其他标

签br等亦可。

复制代码代码如下:

<div class=”warp” id=”float1″>

<h2>1）添加额外标签</h2>

<div class=”main left”>.main{float:left;}</div>

<div class=”side left”>.side{float:right;}</div>

<div style=”clear:both;”></div>

</div>

<div class=”footer”>.footer</div>

/[code]

优点：通俗易懂，容易掌握

缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦，这是坚决不能忍

受的，所以你看了这篇文章之后还是建议不要用了吧。

2）使用 br标签和其自身的 html属性

这个方法有些小众，br 有 clear=“all | left | right | none” 属性

[code]

<div class=”warp” id=”float2″>

<h2>2）使用 br标签和其自身的 html属性</h2>

<div class=”main left”>.main{float:left;}</div>

<div class=”side left”>.side{float:right;}</div>

<br clear=”all” />

</div>

<div class=”footer”>.footer</div>

优雅的 Demo

优点：比空标签方式语义稍强，代码量较少

缺点：同样有违结构与表现的分离，不推荐使用

3)父元素设置 overflow：hidden

通过设置父元素overflow值设置为hidden；在IE6中还需要触发 hasLayout ，例如 zoom：1；

复制代码代码如下:

<div class=”warp” id=”float3″ style=”overflow:hidden; *zoom:1;”>

<h2>3)父元素设置 overflow </h2>

<div class=”main left”>.main{float:left;}</div>

<div class=”side left”>.side{float:right;}</div>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38632247

粉丝: 8
资源: 1000

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip