我們都知道overflow:hidden可以溢位隱藏，即當內容元素的高度大於其包含塊的高度時，設定該屬性即可把內容區域超出來的部分隱藏，使內容區域完全包含在該包含塊中。
然而"overflow:hidden"還有另外乙個特殊的用途，那就是清除包含塊內子元素的浮動。
具體**如下**片.
//css**
.wrap
.wrap>div
.wrap>div:nth-child(1)
.wrap>div:nth-child(2)
.wrap>div:nth-child(3)
//html
class
="wrap"
>
>
第乙個div
>
>
第二個div
>
>
第三個div
>
div>
[建議] 當元素需要撐起高度以包含內部的浮動元素時，通過對偽類設定 clear 或觸發 bfc 的方式進行 clearfix。盡量不使用增加空標籤的方式。
解釋：觸發 bfc 的方式很多，常見的有：
float 非 none
position 非 static
overflow 非 visible
//css
.clearfix:after
.wrap
.wrap>div
.wrap>div:nth-child(1)
.wrap>div:nth-child(2)
.wrap>div:nth-child(3)
//html
class
="wrap clearfix"
>
>
第乙個div
>
>
第二個div
>
>
第三個div
>
div>
//css
.wrap
.wrap>div
.wrap>div:nth-child(1)
.wrap>div:nth-child(2)
.wrap>div:nth-child(3)
//html
class
="wrap clearfix"
>
>
第乙個div
>
>
第二個div
>
>
第三個div
>
div>
清除浮動的三種方式
1.clear both left right 新建乙個div，不要在原先的div上清除 2.在父類使用overflow hidden 相當於清除了元素的溢位 3.after偽類元素 content display block clear both height 0 visibility hidde...
清除浮動效果的三種方式
浮動效果 滿足我們的頁面排版要求，使豎列的盒子橫向的排列起來。負作用 因為浮動元素脫離了標準文件流，會導致父級元素無法被撐開。解決方式 清除浮動負面效果 三種方式 新增空盒子 優點 較流行 缺點 為清除浮動，頁面新增的空盒子太多，新手容易暈 用法 在浮動元素後面 同級元素 新增乙個空的div，並且定...
清除浮動的三種常用方式
清除浮動目的 主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。1.父級新增overflow屬性方法 給父級新增 overflow hidden auto scroll 加三者任一都可以實現 優點 簡潔 缺點 內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素。2.使用...