CSS基础(三)
1. 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响？
特征
- 任何定义为float的元素都会自动被设置为一个块状元素显示，相当于被定义display：block；声明。这样就可以为浮动元素定义width和height属性，即使是内联显示元素也可以。
- 当我们没有指定浮动元素宽度时，浮动元素会自动收缩到能够包含内容的宽度。而块状元素（或者被定义display：block；）显示时，如果没有定义，它的宽度则会自动显示为100%。
- 浮动模型不会与流动模型发生冲突，当元素定义为浮动布局时，它在垂直方向上应该还处于文档流中，也就是说浮动元素不会脱离正常文档流而任意浮动，它的上边线将会与未被声明为浮动时的位置一样，但是在水平方向上，它的浮动边会尽可能的靠近它的包含元素边缘。
- 与普通元素一样，浮动元素始终位于包含元素内，不会游离于外，或破坏元素包含关系。
- 浮动元素后面的块状元素和内联元素都能够以流的形式环绕浮动元素左右。甚至于上面文本流连成一体。
- 当两个或两个以上的相邻元素都被定义为浮动显示时，如果存在足够的空间容纳它们，浮动元素之间可以并列显示，它们的上边线是在同一水平线上。如果没有足够空间那么后面的浮动元素将会下移到能够容纳它的地方这个向下移动的元素有可能产生一个单独的浮动。
对父容器的影响
浮动元素脱离文档流向左或者向右移动，直到边框碰到父元素的边缘。
对其他浮动元素的影响
当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面，当空间不够的时候会被浮动元素卡住。
对普通元素的影响
普通元素无法感知到浮动元素，占据浮动元素所在的位置，但是普通元素处于浮动元素的下层。
对文字的影响
浮动元素旁边的文字框被缩短，从而给浮动元素留出空间，文字框围绕浮动元素。
2. 清除浮动指什么？如何清除浮动？
是什么
在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
清除浮动方法
方法一： 使用带clear属性的空元素
在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。
示例代码：
优点：简单，代码少，浏览器兼容性好。
缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。
方法二： 使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
示例代码：
方法三： 给浮动的元素的容器添加浮动
给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。
方法四： 使用邻接元素处理
什么都不做，给浮动元素后面的元素添加clear属性。
示例代码：
方法五：使用CSS的:after伪元素
结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。 给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。
需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。
3. CSS的几种定位方式及使用场景
CSS 有三种基本的定位方式：文档流、浮动和定位。
文档流(normal flow)： 文档流是所有元素布局的基础，作为从左到右、从上到下的布局方式，这是最常用的一种排版布局方式。
浮动(float)：float:left/right；浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。适用于实现文字环绕图片和多列布局。
定位(position)有以下四种方式：
| static | 默认布局，按照文档流定位； | 默认布局； |
| relative | 相对于元素自身正常位置进行定位，元素在文档流中仍占据原来空间，只是表现出来的位置会相对原来的位置偏移； | 适用于层叠效果； |
| absolute | 绝对定位，相对于有定位属性的第一个父元素偏移，absolute定位元素会脱离文档流； | 适用于小区块的布局使用频繁 |
| fixed | 相对浏览器窗口定位，设置的偏移属性，是相对于浏览器窗口的位置。 | 适用于广告等意图一直出现在用户眼前的信息。 |
4. z-index 有什么作用？ 如何使用？
z-index 的作用
控制非文档流元素的叠放顺序，该属性值越高，元素位置越靠上。
使用方法
当元素设置为relative、absolute或fixed时，通过设置z-index：number； 决定叠放顺序，属性值越高，元素位置越靠上。
5. 导航栏效果
实现如图导航栏效果：
在线demo：导航栏效果
6. 卡片效果
实现如图卡片效果：
在线demo：卡片效果