第七节 Float属性

CSS浮动属性Float详解什么是浮动？浮动是 css 的定位属性。

我们可以看一下印刷设计来了解它的起源和作用。

印刷布局中，文本可以按照需要围绕图片。

一般把这种方式称为“文本环绕”。

这是一个例子：在排版软件里面，存放文字的盒子可以被设置为允许图文混排，或者无视它。

无视图文混排将会允许文字出现在图片的上面，就像它甚至不会在那里一样。

这就是图片是否是页面流的一部分的区别。

网页设计与此非常类似。

在网页设计中，应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。

浮动的元素仍然是网页流的一部分。

这与使用绝对定位的页面元素相比是一个明显的不同。

绝对定位的页面元素被从网页流里面移除了，就像印刷布局里面的文本框被设置为无视页面环绕一样。

绝对定位的元素不会影响其它元素，其它元素也不会影响它，无论它是否和其它元素挨着。

像这样在一个元素上用CSS设置浮动：#sidebar { float: right; }fload属性有四个可用的值：Left 和Right 分别浮动元素到各自的方向，None (默认的) 使元素不浮动，Inherit 将会从父级元素获取float值。

浮动的用处除了简单的在图片周围包围文字，浮动可用于创建全部网页布局。

浮动对小型的布局同样有用。

例如页面中的这个小区域。

如果我们在我们的小头像图片上使用浮动，当调整图片大小的时候，盒子里面的文字也将自动调整位置：同样的布局可以通过在外容器使用相对定位，然后在头像上使用绝对定位来实现。

这种方式中，文本不会受头像图片大小的影响，不会随头像图片的大小而有相应变化。

清除浮动清除(clear)是浮动(float)的相关属性.一个设置了清除浮动的元素不会如浮动所设置的一样，向上移动到浮动元素的边界，而是会忽视浮动向下移动。

如下，一图顶千言。

上例中，侧栏向右浮动，并且短于主内容区域。

页脚(footer)于是按浮动所要求的向上跳到了可能的空间。

关于float的描述一、什么是floatfloat是CSS中用来控制元素在页面中浮动的属性。

它可以让元素脱离文档流，使其能够在页面上自由移动，同时也可以和其他元素进行交互。

二、float的属性值float属性有三个可能的取值：left、right和none。

其中，left表示元素向左浮动，right表示元素向右浮动，none表示元素不浮动。

三、float的作用1.实现文字环绕图片效果通过将图片设置为浮动，可以让文字环绕在图片周围。

这样可以有效地利用页面空间，并且使得页面布局更加美观。

2.实现多列布局通过将多个块级元素设置为浮动，并且设置宽度和间距，可以实现多列布局。

这种方式比使用表格进行布局更加灵活，并且兼容性更好。

3.实现响应式设计通过将某些元素设置为浮动，并且使用媒体查询进行适配，可以实现响应式设计。

这样可以让网站在不同设备上显示效果更加优秀。

四、float的特性1.脱离文档流当一个元素被设置为浮动时，它会脱离文档流，并且不再占据原来的位置。

这意味着其他元素会填补它留下的空白区域。

2.高度塌陷当一个元素被设置为浮动时，它的父级元素的高度会塌陷。

这是因为浮动元素不再占据父级元素的空间，所以父级元素的高度会变成0。

3.清除浮动为了避免浮动元素造成的高度塌陷问题，可以使用清除浮动的技术。

常用的清除浮动方式有：添加空div、使用伪类、使用overflow属性等。

五、float的注意事项1.避免滥用虽然float可以实现很多布局效果，但是滥用float会导致代码混乱，并且增加维护难度。

在使用float时需要慎重考虑。

2.避免重叠当多个元素都被设置为浮动时，可能会出现重叠的情况。

为了避免这种情况，可以使用clear属性来清除浮动。

3.注意IE6下的bug在IE6下，如果一个浮动元素没有明确指定宽度，那么它就会变成100%宽度。

在IE6下需要特别注意这个问题，并且给所有需要浮动的元素都指定一个明确的宽度。

CSSfloat属性
表⽰向左浮动，⽐如多个div在⼀个页⾯上，默认情况是：⼀⾏⼀个div，但是只要在div的中使⽤float：left，可以使⼀⾏有多个div，这样可以把⽹页划分成很多块，但是使⽤该属性会影响后⾯的元素，所有如果后⾯的div不想再被影响，可以使⽤clear:both；可以理解为清除float:left和float:right的影响，返回到默认状态。

像<ul><li></li></ul>也可以这么使⽤，做导航菜单基本上有这个元素,使⽤float:left使其横向显⽰。

如果浮动⾮替换元素，则要指定⼀个明确的宽度；否则，它们会尽可能地窄。

注释：假如在⼀⾏之上只有极少的空间可供浮动元素，那么这个元素会跳⾄下⼀⾏，这个过程会持续到某⼀⾏拥有⾜够的空间为⽌。

值描述
left元素向左浮动
right元素向右浮动
none默认值。

元素不浮动，并会显⽰在其在⽂本中出现的位置
inherit规定应该从⽗元素继承 float 属性的值。

深入理解CSS网页布局之float属性在CSS网页开发布局中，需要对浮动和定位有深刻的理解才能在开发中游刃有余。

基于此，做了本篇总结，这些总结来自实践经验和阅读一些书籍后的理解总结，主要内容为浮动，清除浮动，定位。

一、float属性深入理解首先简单布局一下，代码如下：效果图：图p11、脱离文档流脱离文档流，即在元素原来的位置中脱离出来，可以理解为漂浮起来，但是要注意一些细节。

细节一:若浮动元素后面有不浮动的元素，那么其后面不浮动的元素会把浮动元素视为消失，然后顶到它的位置中。

我们来测试一下：对第二个div（id=box2）设置浮动，观察第三个div的位置.效果图:图p2我们可以看到第三个div顶到浮动div原来的位置上去了，这里的float：left 设置为right，也同样，即第二个div消失了，后面的顶上去。

效果图:图p3细节二我们不能理解为设置float之后，这个元素就完全漂浮在没有设置float元素的上面，虽然在细节一中的效果图中看是漂浮在上面（2在3的上面）。

这个细节就是浮动只对后面的元素造成影响（所谓影响，就是后面的元素把它视为消失），对于排在它前面的同级块元素，不会对其位置造成影响。

（即如果前面的同级块元素没有设置浮动，那么它也不会漂浮到这个元素的上面）。

细节一的p1例子已经验证了这一特性（2还是在1的下面）。

那么，对于排在前面的同级内联元素呢？对于同级内联元素，设置了float属性的元素与前面的内联元素属于同一层面，而且优先级高于前面的同级内联元素，这里的优先级指位置优先级，比如float：left，那么前面的内联元素如果原来占据最左边，那么它由于优先级低于浮动元素，所以它就会让位与浮动元素，排在浮动元素的右边。

我们来看一下测试代码（重点查看注释的测试内容）：效果图:图p4分析：对于1（这里用数字代表相应的div，上下同）来说，由于排在浮动的2的前面，所以它无论是否为块元素，都和2属于同一层面，再由于它不是块元素，所以它的位置优先级别低于2，由于2的float：left，向左浮动，所以它靠最左，1被挤到它的右边。

【CSS学习】---float浮动属性⼀、前⾔ 浮动元素以脱离标准流的⽅式来实现元素的向左或向右浮动，并且浮动元素还是在原来的⾏上进⾏浮动的。

float浮动属性的四个参数：left：元素向左浮动；right：元素向右浮动；none：默认值，元素不浮动；inherit：继承⽗元素的float属性值。

举两个栗⼦⽗元素是否注意到⾃⼰有个浮动的⼦div呢？<div style="width: 400px; height: auto; border: 2px solid black;"><div style="width: 50px; height: 100px; background-color: green; float: right;"></div>我才不知道有没有浮动框，我只显⽰⽂字的⾼度</div>从中我们可以发现，处于标准流中的⽗div并不知道浮动元素的存在，⽽浮动元素却知道它⽗元素的边界，它⼀直向右浮动直到撞到了⽗框的右边界为⽌。

<div style="width: 240px; height: auto; border: solid 1px black;"><div style="width: 80px; height: 80px; background-color: red;">框⼀</div><div style="width: 80px; height: 80px; background-color: green; float: right;">框⼆</div></div>我们发现框⼆并没有跑到框⼀这⼀⾏的右侧去，⽽浮动到了原来这⾏的的右侧。

下⾯我们⼀起逐步学习CSS中的浮动属性float。

float属性归功于互联网时代的发展，和电脑等移动高科技设备的普及，大家的生活也在不断的发生着变化，“足不出户看世界”已不再是虚幻，“蜗居”也不再是贬义而是一种新的生活方式。

网络商城，刷剧交友，一个个现实生活中的场景都以各种各样的网页呈现在大家眼前，带领大家遨游在互联网的世界中，从而如何能够呈现各种各样丰富多彩的页面，也就是前端技术的重要性就不言而喻了。

#float的文字环绕float这个单词从字面上理解是“浮动”的意思，我们也可以理解成“漂浮”的意思，也就是使其作用的元素“漂浮”起来，然后再“压”入之后的布局之中。

float最经常的用途是“文字环绕”效果，就是让图片被文字包裹，我们先来看一段代码。

从上面的代码中我们可以看出，一个img元素后面跟着用p元素包含的一段文字，并且img元素被赋予了float:left属性。

浏览器在解析这段html构成的时候先解析到了img，但因为img有浮动属性（即float:left），所以img就“漂浮”了起来，脱离了正常的文本流，对于脱离正常文本流的动作我们这样理解，img有了“超能力”,它独立成为一层悬浮出来，临时的在页面的上面一层。

然后浏览器继续解析到了之后的文字，因为文字部分没有浮动属性加持，所以它还是要规规矩矩的按照正常的文本流规则显示，加之文字之前的img元素已经悬浮了起来，所以文字会向“上”移动，“顶替”了原先img的位置并在img的位置上开始显示。

最后都解析完了，悬浮的元素总是落地的，所以悬浮着的img元素被“压”入之后的文字中，因为文字是流的形式，像水一样，就会包裹住img形成了“文字包裹”的效果。

float是一个魔鬼，它会改变之后元素的布局。

大家也可以理解成float属性是块头大的霸道大哥，没有float元素的是小老弟，小老弟看到了大哥，在没有其他要求的情况下小老弟要“敬重”大哥，要给大哥让路。

#float对块级元素的布局从代码中我们不难理解，三个div（红黄蓝）是三个块级元素，所以会换行罗列显示，即纵向布局显示。

CSS的元素浮动——float属性
浮动是指对页面中的元素位置进行定位，是CSS排版中重要的布局方式之一。

通过浮动可以使页面更加整齐。

在CSS中，可以通过float属性来对元素进行浮动设置。

该属性有三个属性值，分别是none、left和right。

float属性语法结构如下所示。

其中，none表示元素在页面中不浮动，不浮动时默认在页面左边；left表示元素在页面左边浮动；right表示元素在页面右面浮动。

运行后效果如图1所示。

图1 设置元素浮动运行结果图
如果把元素都设置为左浮动或右浮动，则元素会依次排列在左边或右边。

如
图2所示。

图2 元素依次浮动在页面左边运行结果图。

CSS之float属性归纳探讨相信很多同学在学习CSS的float属性时，会有很多说不清道不明的⼩情绪，我也遇到⼀些，暂且mark⼀下。

以下内容分为如下⼩节：1：float属性2：float属性的特性 2.1：float之⽂字环绕效果 2.2：float之⽗元素⾼度塌陷3：清除浮动的⽅法 3.1：html法 3.2：css伪元素法4：float去空格化5：float元素块状化6：float流体布局 6.1：单侧固定 6.2：DOM与显⽰位置不同的单侧固定 6.3：DOM与显⽰位置相同的单侧固定 6.4：智能布局1：float属性float，顾名思义是漂浮，浮动的意思。

但是在css中，它被理解成浮动。

float有四个属性，即1 float:none;2 float:left;3 float:right;4 float:inherit;⽐较常⽤的两个属性值是左浮动和右浮动。

在接下来的分享中，只会拿左浮动作为例⼦。

其他浮动属性值与左浮动原理相同。

2：float属性的特性 2.1：float之⽂字环绕效果浮动的初衷就是为了⽂字环绕效果。

看如下代码和demo。

1 <div class="container">2 <div class="content"></div>3 <p>4 Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!H5 </p>6 </div>1 .container {2 width: 300px;3 height: 300px;4 border: 1px solid black;5 }6 .container .content {7 float: left;8 width: 150px;9 height: 150px;10 background-color: lightpink;11 margin: 5px;12 }content 元素设置了左浮动，使div元素脱离⽂档流，⽂字在其周围坏绕显⽰。