CSS浮動是一種常用于布局的技術，它可以將元素從文檔流中移除，使得其它元素可以環繞其周圍。然而，使用浮動會對其它元素產生影響，下面我們來看看這些影響。

.box {
float: left;
width: 100px;
height: 100px;
margin-right: 10px;
}

在上面的代碼中，我們定義了一個類名為.box的元素，并將其設置為左浮動。這里需要注意的是，由于我們將多個.box元素放在同一行，所以我們還設置了一個右邊距來分隔它們。

接下來，我們在.html文件中添加三個.box元素：

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

運行頁面后，你會發現三個.box元素都向左浮動，并且它們之間有10px的空隙。這是因為浮動元素會脫離文檔流，不再占據原來的位置，所以它們之間的空隙也隨之出現。

那么，對于普通的塊級元素，浮動元素又有何影響呢？

<div>
<p>這是一段普通的文本。</p>
<div class="box"></div>
<p>這是另一段普通的文本。</p>
</div>

在上面的代碼中，我們將一個.box元素插入到兩個普通的段落元素之間。這時，你會發現兩個段落元素的文本都環繞在了.box元素的周圍，而不是像我們期望的那樣向下平鋪。

這是因為浮動元素會對文檔流產生影響，為了使得文本能夠環繞在.box元素的周圍，浮動元素會往上“爬升”，直到遇到某個不可浮動的元素或容器，然后將自己放置在該元素或容器的邊緣。

在上面的例子中，.box元素就是浮動元素，它會向上“爬升”，直到遇到了包含它的div元素。由于div元素是一個塊級元素，所以.box元素會將自己放置在div元素的邊緣上，從而產生了前面說到的效果。

總之，在使用CSS浮動布局時，一定要注意它對其它元素的影響，特別是在包含浮動元素的容器內部。