先上一個簡單的例子
簡單的例子
如圖所示,圖片被添加了float:left屬性,實現(xiàn)了文字環(huán)繞效果.但是再給div加了border之后,我們發(fā)現(xiàn)圖片并沒有被包起來,也就是圖片浮上來了一層,那么怎么解決這種情況,包住圖片呢?
下面將介紹三種清除浮動的方法.
1. 給空div加clear
在div元素的最后,加一個空div,并且加上clear屬性,和綠色border(border大法好!).
<div style="clear: left; border: 4px solid green"></div>
空div
我們發(fā)現(xiàn)綠色的空div把紅色div的下邊壓到了圖片以下,達(dá)到了我們清除浮動的效果.
clear: left在這里的意思是:有此樣式的元素盒的左邊不可以有浮動的元素.
clear元素不明白點這里
2. 使用偽類
和第一種方法的原理是一樣的,只不過這次不需要每次清除浮動的時候都寫一遍代碼.
用偽類聲明一個css屬性,需要清除浮動的元素,加上就可以實現(xiàn)了,綠色環(huán)保.
在css中寫入
.clearfix::after{
content:'';
border: 4px solid green;
clear: both;
display: block;
}
然后在最外層div上加上clearfix類就可以實現(xiàn)了
偽類實現(xiàn)
3.overflow: hidden清除浮動
給父元素加上overflow: hidden屬性.
overflow: hidden
overflow: hidden 的意思是超出的部分要裁切隱藏掉,那么為什么會有清除浮動的效果呢?因為父元素沒有聲明高度,所以要把父元素中所有的元素高度計算出來,才能根據(jù)所計算的高度,超出高度的將被裁掉.
我們試試給父元素加一個100px的高度:
圖片就被剪裁了
所以此方法是有適用范圍的,父元素的高度必須是auto,否則將不生效!
