从《 【CSS】【9】CSS盒子的浮动 》知道，当盒子设置为浮动时，也意味着它从标准流脱离出来，后面在标准流的元素会占据原盒子所在的空间，如下图所示：

一、盒子的clear属性：

   上图中Box-1和Box-2均设置为向左浮动，Box-3设置为向右浮动，由于三个盒子均设置了浮动，所以三者均从标准流中脱离出来，所以文本（粉红色背景的文字）段落占据了原来Box-1、Box-2和Box-3盒子的空间，形成文字围绕着蓝色盒子布局。但有时候我们不想让文本受到浮动盒子的影响，想达到下面的效果，该如何办呢？

   上图可以看出文本（粉红色背景的文字）不再围绕着Box-1和Box-2排列，但依旧围绕着Box-3排列，实现其实很简单，只需要对P标记选择器的clear属性值设置为left即可。

.father p

{     border:1px dashed #111111;     background-color:#ffbaff;clear:left;

}

由于文本所属的盒子在P标记中，所以clear设置为left就意味着文本不再受向左浮动盒子的影响，从而P标记内的文本不再围绕着Box-1和Box-2排列。若同时也想使文本不再围绕着Box-3排列该如何办呢？只需要把clear设置为both即可。

.father p

{     border:1px dashed #111111;     background-color:#ffbaff;clear:both;

}

效果如下：

二、盒子的高度问题：

1、存在如下的HTML

<div class="father">

  <div class="son1">Box-1<br/>Box-1</div>   <div class="son2">Box-2</div>   <div class="son3">Box-3<br/>Box-3<br/>Box-3</div></div>

父块div中包括三个子div，这三个子div均设置为浮动，效果图如下：

从图中明显可以看出三个子div由于浮动都脱离出标准流，所以没有在父div中显示。但我们希望父div能自动适应子div的高度，即如下效果：

2、如何做到的呢？

其实这里没有一个标准的方法，使用clear属性也可以做到这点。

<div class="father">

   <div class="son1">Box-1<br/>Box-1</div>    <div class="son2">Box-2</div>    <div class="son3">Box-3<br/>Box-3<br/>Box-3</div><div class="clear"></div></div>

增加一个子div，该div并无内容显示，同时为其设置clear类别选择器，使其clear属性消除左右浮动影响：

.father .clear

{     margin:0px;     padding:0px;     border:0px;clear:both;

}

3、可以这样理解，相当于把文本（粉红色背景的文字）去掉，只剩下一个空盒子，同时这个空盒子消除了左右浮动的影响，把父div容器撑大了，从而可以容纳三个蓝色的子div盒子。