Wedding Dresses Outlet

经历了两天的博百优网赚系列（链接类和广告联盟类）之后，今天要回归主题，博百优CSS的学习当中。今天大家一起来学习行框与清理，这是继上次的CSS定位的绝对相对定位和浮动定位之后的新的知识点。

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。实际上，创建浮动框使文本可以围绕图像。如博百优给出的下图：

要想阻止行框围绕在浮动框的外部，那么博百优建议对这个框的应用clear。clear属性是可以left，right，both或none，它表示框的哪些边不应该挨着浮动框。为了实现这种效果，在被清理元素的顶空白边上面添加足够的空间，使元素的顶边缘垂直下降到浮动框的下面，下图：

下面我们详细来看看浮动和清理，假设一个图片，希望让它浮动到一个文本块的左边。希望将这个图片和文本包含在另一个具有背景颜色和边框的元素中。用到以下代码：

. news{

background-color:gray;

border:solid 1px black’

}

.news{

float:left;

}

.news p{

float:right;

}

<div class=”news”>

<img src=”news-pic.jpg”/>

<p>Some Text</p>

</div>

不 幸的是，没有现有的元素可以应用清理，所以需要添加一个空元素并且清理它。

这会实现我们希望的效果，但是要添 加不必要的代码。常常有元素可以应用clear， 但是有时候不得不为了进行布局而添加无意义的标记。

还可以不对浮动的文本和图像进行清 理，而是选择对容器div进行浮动：

这也会产生我们想要的结果。不幸的 是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的几乎所有东西进行浮动，然后使用适当的有意义元素（常常是站点的页脚） 对这些浮动元素进行清理。这有助于减少或消除不必要的标记。但是，浮动会变得复杂，而且一些老式浏览器在处理有许多浮动元素的布局时有困难。因此，许多人 喜欢添加少量的额外标记。

应用值为hidden或auto的overflow属性会自动地清理包含的任何浮动元素，而不需要添加额外 的标记。这个方法并不适合所有情况，因为设置框的overflow属 性会影响它的表现。

最后，一些人使用CSS生 成的内容或JavaScript对浮动元素进行清理。这两种方法的基本概念是相同的。并不直接向标 记中添加进行清理的元素，而是将它动态地添加到页面中。对于这两种方法，需要指定进行清理的元素应该出现在哪里，而且常常要添加一个类名：

在使用CSS方 法时，结合使用:after伪类和内容声明在指 定的现有内容的末尾添加新的内容。在这个示例中，我添加了一个句点，因为它是个非常小的不引人注意的字符。不希望新内容占据垂直空间或者在页面上显示，所 以需要将height设置为0，将visibility设 置为hidden。因为被清理的元素在它们的顶空 白边上添加了空间，所以生成的内容需要将它的display属 性设置为block。

这样设置之后，就可以对生成的内容 进行清理：

对JavaScript方 法的解释超出了本书的范围，但是需要简要地提及一下。与前面的方法不同，JavaScript方法 在所有主流浏览器上都是有效的（在打开脚本功能的情况下）。但是，如果使用这个方法，就需要确保在关闭脚本功能的情况下内容仍然是可读的。

关于CSS定位:

在CSS中关于定位的内容是：position:relative | absolute | static | fixed
static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。
relative 不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。
absolute 脱离文档流，通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
fixed 固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
CSS中定位的层叠分级：z-index: auto | namber;
auto 遵从其父对象的定位
namber 无单位的整数值。可为负数

内容当然来自我们的精通CSS‘：高级Web标准解决方案啦。