css浮动实例（css盒子模型浮动和阴影代码）

css浮动实例（css盒子模型浮动和阴影代码）2）清除浮动之额外标签法：由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。当我们设置了左浮动后，就可以让他们在一行进行展示：1）为什么要清除浮动？我们前面说过，浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现。

1.盒子模型--阴影的设置

1）box-shadow 主要参数：水平阴影的位置、垂直阴影的位置、模糊距离、阴影尺寸、阴影颜色

2）举例：如下图是我所设置的盒子的阴影相关参数以及最后展现的效果

2.盒子模型--浮动

作用：让块级元素呆在一行 语法：float：方向

如下图，在设置浮动之前，两个盒子独占一行

当我们设置了左浮动后，就可以让他们在一行进行展示：

3.清除浮动的方法：

1）为什么要清除浮动？

我们前面说过，浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现。

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。

2）清除浮动之额外标签法：

主要的方法是，在子元素的最后添加一个额外的标签如：

并为此标签添加css样式：.clear{clear:both}

3）清除浮动之父元素：

该方法只需要将父元素中添加样式：overflow:hidden

4）清除浮动之伪元素：（给父元素添加如下代码即可）

.clearfix:after{

content:'';

display:block;

height:0;

clear:both;

visibility:hidden;

}

.clearfix{

/* IE6、7专有 */

*zocm:1;

}

5）清除浮动之双伪元素：（给父元素添加如下代码即可）

.clearfix:before .clearfix.after{

content:'';

dispaly:table;

}

.clearfix:after{

clear:both;

}

.clearfix{

*zocm:1;

}