浮动与清浮动（一）：浮动

时间 2019-12-08

标签浮动繁體版

原文原文链接

在进行网页设计布局时，浮动与清浮动是最须要解决的问题之一。这篇文章记录了我在学习过程当中的总结与反思，欢迎交流与指正。css

以<div>和<span>为例：前端

<style type="text/css">
	div, span {border: 1px solid red;}
	</style>

<body>
    <div class="div1">div1</div>
	<div class="div2">div2</div>
	<span class="span1">span1</span>
	<span class="span2">span2</span>
</body>

在 Firefox39 (如下简称ff）中获得以下渲染效果：

能够得出如下结论：布局

块状元素 div 占满整行；学习
块状元素支持宽高，不设置时宽默认占满整行，高由内容撑开；测试
内嵌（行内）元素 span 不支持宽高，由内容撑开；网站
span 换行被解析，两个 span 之间间距4像素（即1个半角空格）。spa

inline-block

给 span 和 div 添加 inline-block：.net

<style type="text/css">
    display: inline-block;
</style>

在 Firefox39 获得以下渲染效果：
设计

能够获得如下结论：code

div 被显示为内嵌（行内）元素；
换行被解析成5像素；
内嵌元素支持宽高，不设置时由内容撑开。

总结：
从上面一个简单的例子，彷佛能够找到浮动的第1种方法，即添加 CSS 样式``。BTW，display 的经常使用值还包括：inline/block/等，详见 [CSS display
属性][4]。

可是，inline-block 是 CSS2.1 新增的值，因此有必要在 IE 下进行兼容性测试（文档模式：IE7）。
未添加 inline-block 前：

能够看出，与 FF 的区别在于 IE7 不支持内嵌元素的上下样式设置。
添加 inline-block 后：

能够看出，终于支持内嵌元素的上下样式设置了啊！！！
But，说好的在同一行并排显示呢？难道真的不能作朋友吗？！

总结：
IE 7 不支持块标签的 display: inline-block 样式。

float

由于 inline-block 不支持部分 IE 版本，所以尝试第二种方法：float。
添加 float: left 样式，并给 span2 设置宽高：

<style type="text/css">
	div, span {
		border: 1px solid red;
		float: left;
	}

	.span2 {
		width: 100px;
		height: 50px; 
	}
</style>

ff 中获得以下渲染效果：

能够看出：

使块元素在一行显示;
换行未被解析（各元素之间无间距）；
支持宽高，不设置宽高时由内容撑开。

IE7 渲染效果以下，无 bug：

总结：
float 是浮动的利器，这也说明了为何各大网站会广泛使用 float。可是，追溯 float 的历史，能够知道 float 本来是用来解决图文混排的，所以滥用 float 并不可取（如同当年滥用 table 布局），前端大牛张鑫旭博客也有一篇文章专门谈到了 float 这个问题。

float 特色

脱离文档流；

文档流是指文档中可显示对象在排列时所占用的位置。将窗体自上而下分红一行行, 并在每行中按从左至右的顺序排放元素。
脱离文档流即再也不按照默认的自上而上、从左至右的顺序进行排列，而是按照规定的样式进行显示。

脱离文档流以后，按照指定的一个方向移动直到碰到父级的边界或者另一个浮动元素中止；

这里有两个注意点：一是父级边界，二是浮动元素。

Demo1:父级边界(body)
https://jsfiddle.net/ChasonZhang/9Lgugpxu/1/

.div1 {
		float: left;
		background-color: blue;
		width: 100px;
		height: 100px;
	}
	.div2 {
		background-color: red;
		width: 200px;
		height: 200px;
        float: right;
	}

<div class="div1">div1</div>
<div class="div2">div2</div>

经过上面的 demo 能够发现，当元素 float 以后，它就会一直飘啊飘，一直飘到父级元素（此处是 body）的边界，即 content 与 border 的分界线处。
所以，若是将 div1 放在 div2 里面，同时将 div1 设置为：float:right; 那又会如何变化呢？
https://jsfiddle.net/ChasonZhang/2Ln88n5q/

Demo2: 浮动元素
https://jsfiddle.net/ChasonZhang/9Lgugpxu/2/
当 div1 和 div2 都 float 之后，至关于两个 div 虽然脱离了文档流，但如今又处于同一层级，所以又会继续按照从左到右、从上到下的排列顺序进行排列。

提高元素层级（半层）；

http://jsfiddle.net/ChasonZhang/9Lgugpxu/3/