一、浮動

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。

1、請看下圖，當把框 1 向右浮動時，它脫離文件流並且向右移動，直到它的右邊緣碰到包含框的右邊緣：

2、再請看下圖，當框 1 向左浮動時，它脫離文件流並且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文件流中，所以它不佔據空間，實際上覆蓋住了框
2，使框 2 從檢視中消失。

3、如果把所有三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。

4、如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。

5、如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素“卡住”：

6、浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。

因此，建立浮動框可以使文字圍繞影象：

要想阻止行框圍繞浮動框，需要對該框應用 clear
屬性。clear 屬性的值可以是
left、right、both 或 none，它表示框的哪些邊不應該挨著浮動框。

為了實現這種效果，在被清理的元素的 上外邊距 上新增足夠的空間，使元素的頂邊緣垂直下降到浮動框下面：

這是一個有用的方法，它讓周圍的元素為浮動元素留出空間。

假設希望讓一個圖片浮動到文字塊的左邊，並且希望這幅圖片和文字包含在另一個具有背景顏色和邊框的元素中。

二、清理

方法一：

如果只有浮動，沒有清理，浮動元素脫離了文件流，所以包圍圖片和文字的 div 不佔據空間。

由於沒有現有的元素可以應用清理，所以我們只能新增一個空元素並且清理它。

    <style>
    .news {
      background-color: gray;
      border: solid 1px black;
      }
    
    .news img {
      float: left;
      }
    
    .news p {
      float: right;
      }
    
    .clear {
      clear: both;
      }
    </style>
    <div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
    <div class="clear"></div>
    </div>
 

方法二：

選擇對佈局中的所有東西進行浮動，然後使用適當的有意義的元素（常常是站點的頁尾）對這些浮動進行清理。這有助於減少或消除不必要的標記。

    <style>
    .news {
      background-color: gray;
      border: solid 1px black;
      float: left;
      }
    
    .news img {
      float: left;
      }
    
    .news p {
      float: right;
      }
    </style>
    <div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
    </div>