流动布局

流动模型（Flow），即文档流，浏览器打开HTML网页时，从上往下，从左往右，逐一加载。
在正常情况下，HTML元素都会根据文档流来分布网页内容的。

文档流有2大特征：
① 块状元素会随着浏览器读取文档的顺序，自上而下垂直分布，一行一个的形式占据页面位置。
② 行内元素会随着浏览器区队文档的顺序，从左往右水平分布，一行多个的形式占据页面位置。行内元素摆放满一行以后才会到下一行继续排列。

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3.   <head>
  4.     <title></title>
  5.     <style>
  6.     div{ border: 1px solid #f00; margin: 4px; }
  7.     .d3{ width: 100px; }
  8.     </style>
  9.   </head>
  10.   <body>
  11.     <div>d1</div>
  12.     <div>d2</div>
  13.     <div class="d3">
  14.       <span>span1</span>
  15.       <a>a1</a>
  16.       <a>a2</a>
  17.       <span>span2</span>
  18.     </div>
  19.   </body>
  20. </html>

浮动模型

要学习浮动模型的布局模式，就要了解CSS提供的浮动属性（float）。浮动属性是网页布局中最常用的属性之一，通过浮动属性不但可以很好的实现页面布局，而且还可以依靠它来制作导航栏等页面功能。

简单浮动：

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3.   <head>
  4.     <title>简单浮动</title>
  5.     <style>
  7.         .c1{
  8.             width: 200px;
  9.             height: 200px;
  10.             background-color: indianred;
  11.             float: left;
  12.         }
  14.         .c2{
  15.             width: 300px;
  16.             height: 200px;
  17.             background-color: orange;
  18.             float: left;
  20.         }
  22.         .c3{
  23.             width: 400px;
  24.             height: 200px;
  25.             background-color: lightblue;
  26.             float: left;
  27.         }
  30.     </style>
  31.   </head>
  32.   <body>
  34.    <div class="c1"></div>
  35.    <div class="c2"></div>
  36.    <div class="c3"></div>
  38.   </body>
  39. </html>

字围效果

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3.   <head>
  4.     <title>字围效果</title>
  5.     <style>
  7.         .c1{
  8.             width: 200px;
  9.             height: 200px;
  10.             background-color: indianred;
  12.         }
  14.         .c2{
  15.             width: 300px;
  16.             height: 200px;
  17.             background-color: orange;
  18.             float: left;
  20.         }
  22.         .c3{
  23.             width: 400px;
  24.             height: 400px;
  25.             background-color: lightblue;
  27.         }
  29.     </style>
  30.   </head>
  31.   <body>
  33.    <div class="c1">111</div>
  34.    <div class="c2">222</div>
  35.    <div class="c3">333</div>>
  37.   </body>
  38. </html>

当一个元素被设置浮动后，将具有以下特性：

  1. 任何申明为float 的元素都会自动被设置为一个行内块状元素，具有行内块状元素的特性。
  2. 假如某个元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
  3. 在标准浏览器中如果浮动元素a脱离了文档流，那么排在浮动元素a后的元素将会往回排列占据浮动元素a本来所处的位置，使页面布局产生变化。
  4. 如果水平方向上没有足够的空间容纳浮动元素，则转向下一行。
  5. 字围效果：文字内容会围绕在浮动元素周围。
  6. 浮动元素只能浮动至左侧或者右侧。
  7. 浮动元素只能影响排在其后面元素的布局，却无法影响出现在浮动元素之前的元素。

清除浮动

网页布局中，最常用的布局便是浮动模型。但是浮动了以后就会破坏原有的文档流，使页面产生不必要的改动，所以我们一般在浮动了以后，达到目的了，就紧接着清除浮动。

在主流浏览器（如Firefox）下，如果没有设置height，元素的高度默认为auto，且其内容中有浮动元素时，在这种情况下元素的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的情况，叫“浮动溢出”，为了防止这个现象的出现而进行的CSS处理操作，CSS里面叫“清除浮动”。

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3.   <head>
  4.     <title></title>
  5.     <meta charset="utf8">
  6.     <style>
  8.         .box{
  9.             border: 1px solid red;
  10.         }
  12.         .c1{
  13.             width: 200px;
  14.             height: 200px;
  15.             background-color: #336699;
  16.             float: left;
  17.         }
  19.          .c2{
  20.             width: 200px;
  21.             height: 200px;
  22.             background-color: orange;
  23.             float: right;
  24.         }
  26.          .footer{
  27.              width: 100%;
  28.              height: 60px;
  29.              background-color: yellowgreen;
  31.          }
  32.     </style>
  33.   </head>
  34.   <body>
  35.     <div class="box">
  36.         <div class="c1"></div>
  37.         <div class="c2"></div>
  38.     </div>
  39.    <div class="footer"></div>
  41.   </body>
  42. </html>

clear是css中专用于清除浮动的，常用的属性值有以下几个：

值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。 
  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3.   <head>
  4.     <title>简单浮动</title>
  5.     <style>
  7.         .c1{
  8.             width: 200px;
  9.             height: 200px;
  10.             background-color: indianred;
  11.             float: left;
  12.             /*float: right;*/
  13.         }
  15.         .c2{
  16.             width: 300px;
  17.             height: 200px;
  18.             background-color: orange;
  19.             float: left;
  20.             clear: left;
  21.             /*clear: both;*/
  22.         }
  24.         .c3{
  25.             width: 400px;
  26.             height: 200px;
  27.             background-color: lightblue;
  28.             float: left;
  30.         }
  32.     </style>
  33.   </head>
  34.   <body>
  36.    <div class="c1"></div>
  37.    <div class="c2"></div>
  38.    <div class="c3"></div>
  40.   </body>
  41. </html>

清除浮动解决父级塌陷问题：

  1.   .clearfix:after {                         /*在类名为“clearfix”的元素内最后面加入内容*/
  2.             content: ".";                    /*内容为“.”就是一个英文的句号而已。也可以不写。*/
  3.             display: block;                  /*加入的这个元素转换为块级元素。*/
  4.             clear: both;                     /*清除左右两边浮动。*/
  5.             visibility: hidden;              /*可见度设为隐藏。注意它和display:none;是有区别的。*/
  6.                                               /* visibility:hidden;仍然占据空间，只是看不到而已；*/
  7.             line-height: 0;                  /*行高为0；*/
  8.             height: 0;                       /*高度为0；*/
  9.             font-size:0;                     /*字体大小为0；*/
  10.         }
  13. 整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。
  14. 之所以用它，是因为，你不必在html文件中写入
  15. <div class="head clearfix"></div>

此外，还给父元素加上溢出隐藏属性（overflow: hidden;）来进行清除浮动。

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3.   <head>
  4.     <title></title>
  5.     <meta charset="utf8">
  6.     <style>
  8.         .header{
  9.             border: 1px solid red;
  10.             /*height: 80px;*/
  11.         }
  13.         .c1{
  14.             width: 200px;
  15.             height: 60px;
  16.             background-color: #336699;
  17.             float: left;
  18.         }
  20.          .c2{
  21.             width: 100px;
  22.             height: 60px;
  23.             background-color: orange;
  24.             float: left;
  25.         }
  26.           .c3{
  27.             width: 100px;
  28.             height: 80px;
  29.             background-color: lightskyblue;
  30.             float: right;
  31.         }
  34.          .content{
  35.              width: 100%;
  36.              height: 60px;
  37.              background-color: gray;
  39.          }
  42.          /*清除父级塌陷*/
  43.          .clearfix:after{
  44.                display: block;
  45.                content: "";
  46.                clear: both;
  47.          }
  49.     </style>
  50.   </head>
  51.   <body>
  52.     <div class="header clearfix">
  53.         <div class="c1"></div>
  54.         <div class="c2"></div>
  55.         <div class="c3"></div>
  56.     </div>
  58.    <div class="content">
  59.        content...
  60.    </div>
  62.   </body>
  63. </html>