ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
[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 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘: ![](https://box.kancloud.cn/2015-12-13_566d21c0caa0a.gif) 再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。 如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。 ![](https://box.kancloud.cn/2015-12-13_566d21c0da507.gif) 如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”: ![](https://box.kancloud.cn/2015-12-13_566d21c0e68bf.gif) >[danger]**作业:**理解浮动的原理,选择一个大型页面,把整个页面通过盒子色块布局出来。