float 關於使用浮動 和清除浮動
阿新 • • 發佈：2018-07-17
分享圖片 dde image color .com inf spl nbsp pla
float的特點
1,可以使塊元素在一行顯示(元素浮動後會脫標不占位)
2,可以使元素進行模式轉換.
但是,但是,但是 有優點 就一定有缺點. 有時候一不留神就會被它的缺點折磨的抓狂.
我有次用float給父元素裏的所有子元素都添加了浮動效果,但是沒有給父元素設置高度.. 結果是( 廢話不多說 上圖)
代碼
代碼是這樣的
我當時以為是box1的高度問題,反正就是各種調 ,各種改 結果就是 呵呵呵呵呵浪費時間
所以當你用了浮動後
滿足這兩個條件就要使用清除浮動了
首先來說說清除浮動有哪些方法
(清除浮動有三種方法)
1.使用clear屬性清除浮動
在浮動元素後面加個空標簽
選中該標簽 給它加上clear:both;屬性
2,使用overflow屬性清除浮動
給父元素加上overflow:hidden;(必須是子元素部分沒有超出父元素)
3,使用偽元素清除浮動
元素的選擇器::after{
content:‘‘;
display:block;
line-height:0px;
clear:both;
visibility:hidden;
}
float 關於使用浮動 和清除浮動