浮動效果
滿足我們的頁面排版要求,使豎列的盒子橫向的排列起來。
負作用:因為浮動元素脫離了標準文件流,會導致父級元素無法被撐開。
解決方式:清除浮動負面效果(三種方式)
新增空盒子
優點:較流行
缺點:為清除浮動,頁面新增的空盒子太多,新手容易暈
用法:在浮動元素後面(同級元素)新增乙個空的div,並且定義乙個clear類,附給該div
.clear
overflow:hidden
優點:較簡單,相容於市面瀏覽器
缺點:負面效果不詳,暫不推薦使用
用法:定義clear類,並把clear類附給浮動元素的父級元素
.clear
最流行、最常用、可相容所有瀏覽器
用法:定義clear類,使用偽元素:after,並把clear類附給浮動元素的父級元素
.clear:after
.clear
說明:
1. display:block 以塊級元素顯示
2. display:inline 以行內元素顯示
3. visibility的作用是把.隱藏
清除浮動的三種方式
1.clear both left right 新建乙個div,不要在原先的div上清除 2.在父類使用overflow hidden 相當於清除了元素的溢位 3.after偽類元素 content display block clear both height 0 visibility hidde...
清除浮動的三種常用方式
清除浮動目的 主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。1.父級新增overflow屬性方法 給父級新增 overflow hidden auto scroll 加三者任一都可以實現 優點 簡潔 缺點 內容增多時候容易造成不會自動換行導致內容被隱藏掉,無法顯示需要溢位的元素。2.使用...
css清除浮動的三種方式
1 父級元素結束之前加入空div,div的樣式中有 clear both 2 父級元素設定樣式 overflow hidden 原因 為什麼加入overflow hidden即可清除浮動呢?那是因為overflow hidden屬性相當於是讓父級緊貼內容,這樣即可緊貼其物件內內容 包括使用float...