本文部分內容引用自
在寫頁面的時候，碰到了乙個問題，外部標籤的height屬性值明明為auto，但其高度卻說什麼都不考慮其中乙個子標籤的高度，如圖：
外部標籤的高度只是考慮到了input控制項，卻並未考慮文字處的標籤內容。
經過各種翻查資料，終於知道，一切問題都**於float。我將文字處的標籤設定為了浮動，而浮動元素是脫離了文件流的，此時其他元素都視其為不存在，外部標籤當然不會再去考慮他的存在了，與其相同的，還有當position值為relative時的標籤，該類標籤由於脫離了文件流，同樣不會被外部標籤作為考慮元素，來算其本身的高度。
就是給父標籤設定乙個屬性：overflow。即新增overflow:hidden。果然撐起了外部標籤的高度，如圖
為什麼這樣就會解決了這個狀況呢，我又百思不得其解了，又是一頓查資料，最後這個解決方案的原理找到了，原來，當我們設定了overflow:hidden時，會觸發bfc，bfc的意思是，我這個元素裡面的子孫元素，不會影響外部元素的布局。 而浮動本身會造成行內寬度的壓縮，進而可以影響布局。所以這違反了其自己設定的規則啊，子孫元素還是會影響外部元素布局啊，於是，說話算話的bfc就反其道而行，不讓浮動元素造成寬度的壓縮，將其撐起來，由此，實現了我們的目的，讓float元素成功的撐起了外部標籤的高度。
resize 按鈕不會被偽元素遮蓋
textarea預設有個resize樣式，效果就是下面這樣 讀 css 揭秘 時發現兩個亮點 elements with overflow other than visible,and optionally replaced elements representing images or video...
子元素浮動後 父元素的高度自適應
設定父元素的高度為aotu 或100 或者不設定，那麼父元素會根據子元素的高度而自動調整自身高度。栗子 div id wrap img src 1.png alt logo div id content div div css樣式 wrap content img顯示如下圖 比如給上述栗子的img新...
CSS子元素浮動導致父元素高度塌陷問題
根據w3c標準，在頁面中元素都有乙個隱含的屬性叫做 block formatting context，簡稱 bfc，該屬性可以設定開啟或者關閉，預設是關閉的。當開啟元素的bfc以後，元素會具有以下特性 1.父元素的垂直外邊距不會和子元素重疊 2.開啟 bfc 的元素不會被浮動元素覆蓋 3.開啟 bf...