當盒子使用了float屬性進行浮動，文字也按照盒子順利的進行了浮動，有時候這不是我們期望的效果，我們想要的是文字在參照物盒子周圍排列。那么我們該怎么做呢？下面我會給出兩種示例。

第一種方式，使用偽元素，如下所示：

.box {
width: 200px;
height: 200px;
float: left;
background-color: skyblue;
margin-right: 20px;
position: relative;
}
.box::after {
content: '';
display: block;
clear: both;
}

在盒子上添加一個偽元素，然后讓它能夠清楚浮動即可。這種方式比較簡單，但是在IE7一下的瀏覽器不支持。

第二種方式，不使用偽元素，利用overflow屬性實現。如下所示:

.box {
width: 200px;
height: 200px;
float: left;
background-color: skyblue;
margin-right: 20px;
overflow:hidden;
}

在盒子上添加overflow:hidden屬性，讓它自動包裹著盒子中的元素，從而達到文字不會隨著盒子浮動的效果。這種方式在所有的瀏覽器上都能夠支持。

需要注意的是，兩種方式有各自適用的場合，如需兼容IE7一下的瀏覽器，建議使用第二種方案。