CSS: 清除浮動－使用:Overflow

     在使用Div+Css布局的時候我們所面臨的共同問題之一是，封裝容器不擴到子項目的浮動元素的高度。你也可以使用overflow屬性來解決這個問題 ？這不是一個新的CSS技巧。今天，我想重新拾起這幾個技巧的話題。

示範地址：http://webdesignerwall.com/demo/clear-float/

 示範1：

    下面的示範中顯示的浮動子項目在父容器高度不自動適應的問題 。為瞭解決這個問題，您可以簡單地添加CSS屬性overflow:auto (or overflow:hidden)的封裝容器。這也許是最簡單的方法來清除浮動。

.container {
    overflow: auto;
}

示範2：

Overflow:auto 也可以用來防止從周圍的浮動元素封裝的內容。比方說，你正在設計一個評論列表。您將最有可能，有一個頭像，浮於左，評論在右。要防止的頭像周圍環繞的評論，只需添加 overflow:hidden 的評論容器。使用overflow這裡的優點是，我沒有給評論容器設定一個float or width。容器自動校準浮動的頭像圖片。

.image {
    float: left;
}

.text {
    overflow: hidden;
}

缺點（參見示範）

雖然它是一個很好的的技巧，也有一些弊端：

• 使用 overflow:auto，會造成一個捲軸，如果您的內容是延長了容器的邊界。例如，如果你有一個長unbreaking的文本（即長的URL文本）或一個較大的映像，是更大的，則容器滾動顯示。
• 為了避免一個滾動顯示你應該使用overflow:hidden。然而，這種方法也有一個缺點。使用overflow:hidden隱藏任何超出容器的邊界的內容。

Word-wrap

為瞭解決大文本問題，只需添加 word-wrap:break-word 到容器，這將迫使文本換行到一個新的行。

.container {
    word-wrap: break-word;
}

Max-width

為了防止映像擴大超出容器邊界，添加的max-width:100%，它會調整映像的大小符合容器的最大寬度。

.container img {
    max-width: 100%;
    height: auto;
}

英文原稿：CCSS: Clearing Floats with Overflow| WebDesignerWall

翻譯整理：CSS: 清除浮動－使用:Overflow | 孟晨

作者：孟晨
出處：http://www.cnblogs.com/xiaoyao2011/
歡迎任何形式的轉載，但請務必註明出處。