overflow:hidden 為什麼能達到這樣的效果？

假設有 img + p p 內包含很長的文本（遠高於圖片的高度）

img {float:left;}

這時產生p內文字環繞效果

如果 p {overflow:hidden;}

則p好像被設置了寬度 文字不再環繞 形成了跟img並排的一欄

為什麼會這樣的效果？謝謝！

---

「overflow:hidden」讓元素創建了新的 block formatting context（http://www.w3.org/TR/CSS21/visuren.html#block-formatting）。

http://www.w3.org/TR/CSS21/visuren.html#bfc-next-to-float

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with "overflow" other than "visible") must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.

你例子中的 &

元素建立了新的 BFC，所以 &

的內容不能再環繞否則它的盒子必然會和 & 重疊，與規範定義不符了。

---

http://colinaarts.com/articles/the-magic-of-overflow-hidden/

---

這個就涉及到塊級格式化上下文，float,position:relative/absolute，都會觸發，overflow實際上是防止高度塌陷的作用。

---

「為什麼會這樣的效果？」，我覺得重點應該是如何達到樓主想要的效果，而不是糾結於為啥是這個效果~~(^o^)/~

---

推薦閱讀：