[TOC] >[info] 在了解浮动属性之前，首先我们先了解一下行，块和html中关于display属性的相关知识 。 # 块元素和行内元素 >[info] 我们已经学习了很多的HTML标签，不同的标签有不同的特性， 比如从文档流的角度区分，那么标签元素分为块标签与行标签。 ## 块元素 块标签即标签元素是一个块，即有宽、高属性，同时块标签会独 占一行，比如说H1～H6、P、li等标签都是块标签，当然也包括 我们即将学习的DIV标签。 ## 行内元素 行标签正好与块标签意义相反，行标签不具有宽、高特性，也不会占一行，所以我们 可以利用行标签对文字进行区块指定不同的CSS样式达到不同的 效果，行标签也很多，如`em`、`span`标签等。 ## 行内块级元素 * 既有行元素的属性即:不会独占一行 * 又有块元素的属性即：可以设置宽高 * Html中这种元素比较少 * 比如: 还有表单元素 >[danger]注意：所的标签行，块属性都可以互相转换。 # CSS display 属性 >[danger]display 属性规定元素应该生成的框的类型。 * `display: none`; 可以让元素隐藏起来并且不占用 页面空间,浏览器会完全忽略掉这个元素，该元素将不会被 显示，也不会占据文档中的位置 * `display:inline-block`;指定元素兼有块级和行级元素的特性， 即在行内显示但是可以设定宽高。注意：IE6不支持此属性，但是有一些元素具有此属性，比如:img\input。 * `display:inline`;块元素转为行元素。 * `display:block`行元素转为块元素。 ## 浮动float **浮动相关问题** * 可以改变普通文档流的排列方式，可以使得块元素在同一行中排列，使我们的布局更加的方便。多个盒子都浮动后，就产生了块级元素水平排列的效果。 * 通过设置float属性来完成另一种脱离文档流的行为 就是浮动，分为左、右浮动。 * 浮动是脱离文档流的，也就是其他元素视他不见。 * 多个浮动元素不会相互覆盖。 * 若包含的容器太窄，无法容纳水平排列的多个浮动元素， 那么最后的浮动盒子会向下移动,但如果浮动元素的高度不同，那当它们向下移动时可能会被卡住。 * 给一个元素设定了浮动属性，最好给他设定宽高的值，否则有可能发生浮动错位。 <table class="dataintable"> <tbody> <tr> <th> 值 </th> <th> 描述 </th> </tr> <tr> <td> <a>left</a> </td> <td> 元素向左浮动。 </td> </tr> <tr> <td> <a>right</a> </td> <td> 元素向右浮动。 </td> </tr> <tr> <td> <a>none</a> </td> <td> 默认值。元素不浮动，并会显示在其在文本中出现的位置。 </td> </tr> <tr> <td> <a>inherit</a> </td> <td> 规定应该从父元素继承 float 属性的值。 </td> </tr> </tbody> </table> ## 浮动停止（clear 属性） * 当遇到一个浮动元素后会停止 * 遇到父级元素后会停止 * 清除浮动（合理的布局，比较少用） <table class="dataintable"> <tbody><tr> <th>值</th> <th>描述</th> </tr> <tr> <td>left</td> <td>在左侧不允许浮动元素。</td> </tr> <tr> <td>right</td> <td>在右侧不允许浮动元素。</td> </tr> <tr> <td>both</td> <td>在左右两侧均不允许浮动元素。</td> </tr> <tr> <td>none</td> <td>默认值。允许浮动元素出现在两侧。</td> </tr> <tr> <td>inherit</td> <td>规定应该从父元素继承 clear 属性的值。</td> </tr> </tbody></table> **实例** 请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：  再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。 如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。  如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：  >[danger]**作业：**理解浮动的原理，选择一个大型页面，把整个页面通过盒子色块布局出来。