CSS浮动

本节主要介绍普通流中块级元素的位置、盒子的浮动float属性、一个盒子浮动或多个盒子浮动的情况以及浮动的清除。

在普通流中，块级元素的盒子都是上下排列，行内元素的盒子都是左右排列，如果仅仅按照普通流的方式进行排列，就只有这几种可能性，限制太大。

因此又给出了浮动和定位方式进行盒子的排列，从而使排版的灵活性大大提高。

例如：有时希望相邻块级元素的盒子左右排列（所有盒子浮动）或者希望一个盒子被另一个盒子中的内容所环绕（一个盒子浮动）做出图文混排的效果，这时最简单的办法就是运用浮动（float）属性使盒子在浮动方式下定位。

在普通流中，一个块级元素在水平方向会自动伸展，在它的父元素中占满整个一行；而在竖直方向和其他元素依次排列，不能并排，如例1所示。使用“浮动”方式后，这种排列方式就会发生改变。

例1：普通流中块级元素的位置，盒子都不浮动

div.son1,div.son2,div.son3{

									          padding:10px; margin:20px;

									          border:1px dashed #111111;

									          background-color:#90baff;

									       }

									       .father{

									          background-color:#ffff99;

									          border:1px solid #111111;

									       }

    </style>
</head>
<body>
    <div class="father">
       <div class="son1">盒子1</div>
       <div class="son2">盒子2</div>
       <div class="son3">盒子3</div>
    </div>
</body>

float属性：

CSS的float属性，默认值为none，也就是在普通流中的情况，如果将float属性的值设为left或right，元素就会向其父元素的左侧或右侧靠紧，同时盒子的宽度不再伸展，而是收缩，在没设置宽度时，会根据盒子里面的内容来确定宽度。

一个盒子浮动：

1）接下来在上述例1代码中添加一条CSS代码，使类为“.son1”的元素向左浮动 float:left; 代码如下：

例2：“.son1”的元素向左浮动

div.son2,div.son3{

									          padding:10px; margin:20px;

									          border:1px dashed #111111;

									          background-color:#90baff;

									       }

       .father{
          background-color:#ffff99;
          border:1px solid #111111;
       }

div.son1{

									          float:left;

									          padding:10px; margin:20px;

									          border:1px solid red;

									          background-color:green;

									       }

    </style>
</head>
<body>
    <div class="father">
       <div class="son1">盒子1</div>
       <div class="son2">盒子2</div>
       <div class="son3">盒子3</div>
    </div>
</body>

给“.son1”添加浮动属性后，“.son1”的宽度不再自动伸展，而且不再占据原来浏览器分配给它的位置。如果再在未浮动的盒子Box-2中添加文本，就会发现“.son2”中的内容是环绕着浮动盒子的，如例3：

例3：

<head>
    <title>浮动</title>
    <style type="text/css">
       div.son2,div.son3{
          padding:10px; margin:20px;
          border:1px dashed #111111;
          background-color:#90baff;
       }
       .father{
          background-color:#ffff99;
          border:1px solid #111111;
       }
       div.son1{
          float:left;
          padding:10px; margin:20px;
          border:1px solid red;
          background-color:green;
       }
    </style>
</head>
<body>
    <div class="father">
       <div class="son1">盒子1</div>
       <div class="son2">

盒子2：国外技术站点Mashable.com评出了开发人员在2011年应该关注的5项Web开发技术，包括jQuery
									Mobile(jQuery移动版)、Hardware-Accelerated Web Browsers(基于硬件加速的浏览器)、Node.js(服务器端JavaScript)、Real-Time Clickstream
									Sharing(实时点击流分享)、NoSQL
									Databases(NoSQL数据库)入选。jQuery已经成为JavaScript事实上的代名词，很大程度上是因为其可扩展性，易用性以及在项目管理方面可控。随着用于平板电脑和智能手机等设备的触屏优化技术的演进，以及与此相关的web框架的发展，jQuery
									Mobile将成为跨平台，支持多设备的手机应用的非常重要的技术选择之一。越来越多的开发者开始考虑使用HTML
									5技术来开发移动应用，建立一个稳定的易用性好的JavaScript框架将成为移动技术开发人员的重要选择。jQuery Mobile具备成为这一框架的事实上的基础。（因jQuery目前的应用范围相当广泛和普遍）

</div>
<div class="son3">盒子3</div>
</div>
</body>

2）使类为“.son1”的元素向右浮动 float:right; 代码如下：

例4：“.son1”的元素向右浮动

<head>
    <title>浮动</title>
    <style type="text/css">
       div.son2,div.son3{
          padding:10px; margin:20px;
          border:1px dashed #111111;
          background-color:#90baff;
       }
       .father{
          background-color:#ffff99;
          border:1px solid #111111;
       }
       div.son1{
          float:Right;
          padding:10px; margin:20px;
          border:1px solid red;
          background-color:green;
       }
    </style>
</head>
<body>
    <div class="father">
       <div class="son1">盒子1</div>
       <div class="son2">盒子2</div>
       <div class="son3">盒子3</div>
    </div>
</body>

总结：一个盒子浮动后的特点

浮动后的盒子将以块级元素显示，但宽度不会自动伸展。
浮动的盒子将脱离普通流，即不再占据浏览器原来分配给它的位置（IE有时例外）。
- “脱离普通流”是指元素不再占据在普通流下浏览器分配给它的空间，其他元素就好像这个元素不存在一样。例3中，当盒子1浮动后，盒子2就顶到了盒子1的位置，相当于盒子2视盒子1不存在一样。但是，浮动元素并没有完全脱离普通流，这表现在浮动盒子会影响未浮动盒子中内容的排列，例如盒子2中的内容会跟在盒子1之后进行排列，而不会忽略盒子1的存在。
未浮动的盒子将占据浮动盒子的位置，同时未浮动盒子内的内容会环绕浮动后的盒子。

多个盒子浮动：

多个盒子都浮动后，就产生了块级元素水平排列的效果

多个浮动元素不会相互覆盖，一个浮动元素的外边界（margin）碰到另一个浮动元素的外边界后便停止运动。
若包含的容器太窄，无法容纳水平排列的多个浮动元素，那么最后的浮动盒子会向下移动。但如果浮动元素的高度不同，那当它们向下移动时可能会被卡住

例5：两个盒子向左浮动

div.son3{

									          padding:10px; margin:20px;

									          border:1px dashed #111111;

									          background-color:#90baff;

									       }

       .father{
          background-color:#ffff99;
          border:1px solid #111111;
       }

div.son1,div.son2{

									          float:left;

									          padding:10px; margin:20px;

									          border:1px solid red;

									          background-color:green;

									       }

    </style>
</head>
<body>
    <div class="father">
       <div class="son1">盒子1</div>
       <div class="son2">盒子2</div>
       <div class="son3">盒子3：越来越多的开发者开始考虑使用HTML 5技术来开发移动应用，建立一个稳定的易用性好的JavaScript框架将成为移动技术开发人员的重要选择。jQuery Mobile具备成为这一框架的事实上的基础。（因jQuery目前的应用范围相当广泛和普遍）</div>
    </div>
</body>

例6：三个盒子向左浮动，可以尝试将浏览器变小些观察结果，当浏览器变小后，无法容纳水平排列的多个浮动元素，那么最后的浮动盒子会向下移动；若父容器无法容纳所有div时，div会超过父容器；盒子1内容较多，当浏览器变小时盒子3会被盒子1“卡住”。

div.son1,div.son2,div.son3{

									          float:left;

									          padding:10px; 

									          margin:20px;

									          border:1px dashed #111111;

									          background-color:#90baff;

									       }

    </style>
</head>
<body>
    <div class="father">
       <div class="son1">盒子1<br />盒子1<br />盒子1</div>
       <div class="son2">盒子2</div>
       <div class="son3">盒子3</div>
    </div>
</body>

浮动的清除：

clear是清除浮动属性，它的取值有left、right、both和none（默认值）

如果设置盒子的清除浮动属性clear值为left或right，表示该盒子的左边或右边不允许有浮动的对象。
值设置为both则表示两边都不允许有浮动对象，因此该盒子将会在浏览器中另起一行显示

例7：浮动的清除，在例5中盒子1与盒子2都向左浮动，而盒子3没有浮动会环绕浮动的盒子1与盒子2，有时需要将盒子3在浏览器中另起一行显示就要用到清除浮动属性clear

clear是清除浮动属性，它的取值有left、right、both和none（默认值）
如果设置盒子的清除浮动属性clear值为left或right，表示该盒子的左边或右边不允许有浮动的对象。
值设置为both则表示两边都不允许有浮动对象，因此该盒子将会在浏览器中另起一行显示

clear属性既可以用在未浮动的元素上，也可以用在浮动的元素上，如果对盒子3-2同时设置清除浮动和浮动，即： div.son32{clear:both; float:left;} 见盒子3-2的效果

div.son31{

									          clear:both;

          padding:10px; margin:20px;
          border:1px dashed #111111;
          background-color:#90baff;
       }

div.son32{

									          float:left;

									          clear:both;

          padding:10px; margin:20px;
          border:1px dashed #111111;
          background-color:#90baff;
       }
       div.son1,div.son2{
          float:left;
          padding:10px; margin:20px;
          border:1px solid red;
          background-color:Green;
          font-size:16px;font-weight:normal;
       }
    </style>
</head>
<body>
    <div class="father">
       <div class="son1">盒子1</div>
       <div class="son2">盒子2</div>
       <div class="son31">盒子3-1：因jQuery目前的应用范围相当广泛和普遍</div>
    </div>
</body>

CSS 浮动