【CSS】【10】CSS盒子clear属性和高度

从《【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盒子。