在网页设计中， 当我们采用CSS浮动来排列元素时时常会遇到一个问题：怎样控制这一些浮动元素之间的间隔？ 不妨... 这篇文章将用最简洁的方式阐述几种方法，即使你是崭新手也能明白。

哪些是CSS浮动和为哪些需要调整间隔？

何不... 先来看，我们得明白哪些是CSS浮动。简洁浮动就是让元素从文档的正常流中移出，并向左或向右移动到容器边缘。就像报纸上的图片和文字一样，图片能够左对齐或者右对齐，而文字则围绕着它流动。

但是当更多个不同元素都浮动在一起时它们会紧紧地靠在一起，看起来有可能很拥挤。为了让页面更美观、更简单读，我们需要在这一些元素之间提升一些空白区域——也就是间隔，就这样吧...。

第一种方法：采用margin属性

最简洁直接的方法就是采用margin属性。margin能够在元素周围创建空白区域。对于水平排列的浮动元素我们通常只需要调整左右margin即可。

css .box { float: left; width: 100px; height: 100px; background-color: blue; }

/* 在各个盒子右侧添加10像素的空白 */ .box { margin-right: 10px; }，我可是吃过亏的。

这样各个盒子右侧都会有一个10像素较宽度的空白区域。但是最后再来看一个盒子后面不需要当前这个空白怎么办呢？ 也是醉了... 我们能够采用:nth-child选择器来解决当前这个问题：

css .box:nth-child { margin-left: 10px; }，大体上...

说起来... 这意味着从第二个盒子启动，各个盒子左侧都会有10像素的空白。这样第一个盒子就不会有更多余的空白了。

第二种方法：采用相邻兄弟选择器

还有一种方法是采用相邻兄弟选择器。当前这个选择器能够 靠谱。 精准地选择紧跟在另一个指定元素之后的第一个兄弟元素。

css .box + .box { margin-left: 10px; }，说到点子上了。

这种写法表示“任意class为box且位于另一个class为box之后的第一个兄弟元素”都会应用左边距。这样第一个box就不会有左边距了。

第三种方法：清除浮动和父容器较高度问题

说到点子上了。 有时候你有可能发觉虽然设置了margin，但父容器似乎没有正确包含这一些浮动元素——它看起来比实际内容要较小！这是这是因为浮动元素脱离了文档流，引起父容器无法自适应环境其较高度。为了解决当前这个问题，我们需要“清除”这一些浮动效果。 一种常见做法是在父容器内部添加一个伪类clearfix： css .clearfix::after { content: ""; display: block; clear: both; } 然后给包含浮动元素的父级添加class="clearfix"： ... 实例演示 下面我将通过具体例子展示怎样应用以上技巧。

**