在前面的章节中，我们学习了定位布局。虽然这种定位方式可以帮助我们将指定的<div>放置到页面的指定位置，但是需要我们清楚的知道该<div>对应的位置数值，并且还要清楚的知道它的父标签是否存在确定的定位方式。有时候，我们为了进行一些复杂页面的布局，我们需要反复的计算各个<div>的位置像素值，以及尺寸大小等等。显然，这种布局方式并不是很理想。其实，在我们日常的前端布局工作中，使用最多的横向布局，纵向布局，对齐方式以及页面元素的尺寸等等。默认情况下，<div>标签就是在垂直方向上依次排列，也就是纵向布局。那么，如果实现在水平方向上依次排列（横向布局）呢？可能大家会想到行级标签span，但是它的尺寸（宽高）是不起作用的。大部分情况下，我们依然期望使用<div>来进行横向布局和对齐。我们可以将<div>标签修改为“display:inline-block”行内块标签，也可以使用 absolute 绝对定位实现，也可以使用relative相对定位来实现，只不过要麻烦一些。
这里我们介绍另一种实现方式：浮动 float，我们新创建一个“06_float.html”文档
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>float</title>
</head>
<body>
<style type="text/css">
body { margin:0; }
.box1 { width:200px; height:200px; background-color:#FF0000; }
.box2 { width:300px; height:200px; background-color:#0000FF; }
</style>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
我们仅仅定义了两个普通的div标签，一个红色，一个蓝色。
接下来，我们使用浮动方式将这两个div标签在水平方向上依次排列。
<style type="text/css">
body { margin:0; }
.box1 { float:left; width:200px; height:200px; background-color:#FF0000; }
.box2 { float:left; width:300px; height:200px; background-color:#0000FF; }
</style>
我们只需要给两个样式增加“float:left;”就可以了。
接下来，刷新浏览器查看效果
很显然，这种浮动方式实现水平方向横排的布局是非常简便的。
接下来，我们在改动一下代码，取消第二个<div>的浮动
<style type="text/css">
body { margin:0; }
.box1 { float:left; width:200px; height:200px; background-color:#FF0000; }
.box2 { /*float:left;*/ width:300px; height:200px; background-color:#0000FF; }
</style>
我们注释掉“.box2”中的“float:left;”代码，然后刷新浏览器查看效果
默认情况下，红色的<div>就应该在这个位置，但是我们设置它为左浮动之后，它就“浮”起来，下面的位置就“空”了，因此后面的蓝色的<div>就会占据这个“空”的位置了。如果我们注释第一个<div>的浮动，启用第二个<div>的浮动，效果是怎么有的呢？
<style type="text/css">
body { margin:0; }
.box1 { /*float:left;*/ width:200px; height:200px; background-color:#FF0000; }
.box2 { float:left; width:300px; height:200px; background-color:#0000FF; }
</style>
这跟我们最初的样子一样啦。发生这种情况的原因是，浮动之后只对后面的标签起作用。 因为红色<div>在前，蓝色<div>在后，如果红色<div>浮动，那么蓝色<div>会填补它的位置。但是，如果红色<div>正常显示，而蓝色<div>浮动话，它是不能影响前面的红色<div>的。如果想让两个<div>并排显示，就必须同时设置两个<div>的浮动。另外，浮动float除了left值之外，还有right值，它的意思就是向右浮动。例如
<style type="text/css">
body { margin:0; }
.box1 { float:left; width:200px; height:200px; background-color:#FF0000; }
.box2 { float:right; width:300px; height:200px; background-color:#0000FF; }
</style>
我们让第一个红色<div>左浮动，另一个蓝色<div>右浮动，效果如下：
我们发现，红色<div>依然在最左边，而蓝色<div>最靠在了最右边。
接下来，我们在上面代码的基础上，添加一句新代码：
<style type="text/css">
body { margin:0; }
.box1 { float:left; width:200px; height:200px; background-color:#FF0000; }
.box2 { float:right; width:300px; height:200px; background-color:#0000FF; }
</style>
<div class="box1"></div>
<div class="box2"></div>
<div style="height:200px; background:#00FF00;"></div>
我们增加了一个新的<div>标签，但没有设置它的浮动。
我们上面已经提到过，浮动的后果就是后面的没有设置浮动的<div>会占据他们的位置。但是，我们想要实现的布局是，让绿色的<div>位于红蓝<div>的下面。怎么办呢？这就要使用一个“clear:both;”来清除浮动了。我们给新加的<div>添加刚刚的代码即可。
<div style="height:200px; background:#00FF00;clear:both;"></div>接下来，我们回到浏览器中刷新查看效果
这次终于达到目的了。浮动布局方式对于我们实现水平方向横向排列非常的方便。但是，存在的问题就是对后面的标签产生影响，因此我们需要在末尾清除浮动。有时候，我们会故意增加无意义的<div>标签来清除前面<div>标签的浮动影响。
浮动布局还存在一个问题。如果我们设置一个父级<div>标签，然后里面添加多个<div>子标签。并且，这些<div>子标签进行浮动操作。那么，我们的父级<div>标签不会被子标签“撑”起来。这个“撑”的概念就是，父标签的高度由子标签的高度来决定。
<div style="background-color:#cdcdcd;">
<div class="box1"></div>
<div class="box2"></div>
</div>
我们修改一下代码，将之前的红蓝<div>标签放置在父标签<div>中，并且父级<div>标签的背景色为浅灰色。我们回到浏览器中查看效果
我们发现，父级标签<div>确实没有被子标签“撑”起来，它的高度是零。如何让这个父<div>标签 “振作”起来呢？我们可以直接设置这个父<div>标签的高度值，当然这不是本题的答案。我们这里要做的，就是清除浮动。在哪里清除呢？
<div style="background-color:#cdcdcd;">
<div class="box1"></div>
<div class="box2"></div>
<div style="clear:both;"></div>
</div>
就是在父标签<div>中，所有浮动子标签的末尾添加一个空<div>标签，并设置清除浮动。
我们发现红色<div>和蓝色<div>之间的空白区域变成了灰色，也就是父级<div>标签的背景色。很显然，我们的父级标签被“撑”起来了。我们可以在开发者窗口中验证一下。
我们发现父级<div>标签的高度变成了200像素，正是子标签的高度。
最后我们总结一下布局的一些技巧。如果是纵向排列布局的话，可以使用相对定位，如果是横向排列布局话，就可以使用浮动的方式进行布局，但是要记得末尾清除浮动。
本课程的内容可以通过CSDN免费下载：https://download.csdn.net/download/richieandndsc/88962032
