CSS(7)— 通俗講解清除浮動
上一篇講了CSS浮動 博客地址:
一、理解清除浮動
1、為什麼要清除浮動
我們前面說過,浮動本質是用來做一些文字混排效果的,但是被我們拿來做布局用,則會有很多的問題出現。
由於浮動元素不再佔用原文檔流的位置,所以它會對後面的元素排版產生影響,為了解決這些問題,此時就需要在該元素中清除浮動。
準確地說,並不是清除浮動,而是清除浮動后造成的影響
2、清除浮動本質
清除浮動的本質
: 主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。
我們來詳細解釋下這句話
再解釋下就是在標準流下面一個父div沒有設置高度屬性,那麼它的高度就會被子元素的高度撐開。但是如果這個父div中的子元素是浮動的話,如果父div下面再有
一個兄弟div,那麼這個兄弟div就會遮擋這個父元素。這個現象也叫浮動溢出
。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
height: 200px;
border: 1px solid red;
width: 300px
}
.big {
width: 100px;
height: 100px;
background-color: purple;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: blue;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father"> 父div
<div class="big">子div</div>
<div class="small">子div</div>
</div>
<div class="footer">兄弟div</div>
</body>
</html>
運行結果
很明顯這裏,div1和div2已經上浮,而兄弟div就往上移動。這裏因為父div有文字所以佔了點高度,不然兄弟div會完全覆蓋父div。
當然我們可以通過設置父div的高度,來使它不被兄弟div所覆蓋。比如這裏設置 height: 200px;
在刷新下頁面
當父div設置高度后,被覆蓋的問題卻是解決了,但在很多時候我們是不會去設置父div的高度,因為很多時候我們都不知道父div的高度要設置多少。
所以這個時候需要思考解決這個問題。
二、清除浮動的方法
清除浮動的方法本質: 就是把父盒子里浮動的盒子圈到裏面,讓父盒子閉合出口和入口不讓他們出來影響其他元素。
在CSS中,clear屬性用於清除浮動。
基本語法格式
選擇器 {clear:屬性值;}
屬性值
1、額外標籤法
通過在浮動元素末尾添加一個空的標籤,例如
<div style="clear:both"></div>
我們在上面的代碼添加
<body>
<div class="father"> 父div
<div class="big">子div</div>
<div class="small">子div</div>
<div style="clear:both"></div> <!-- 只需在父盒子里最後面添加這個空標籤添加clear:both屬性就可以清除浮動 -->
</div>
<div class="footer">兄弟div</div>
</body>
運行結果
完美解決了。
優點
通俗易懂,書寫方便。
缺點
添加無意義的標籤,結構化較差。
2、父級添加overflow屬性方法
可以通過觸發BFC的方式,可以實現清除浮動效果。(BFC後面會講)
可以給父級元素添加: overflow為 hidden|auto|scroll 都可以實現。
我們將上面代碼修改為
<body>
<div class="father" style="overflow: hidden;"> 父div <!-- 父元素添加 overflow: hidden -->
<div class="big">子div</div>
<div class="small">子div</div>
</div>
<div class="footer">兄弟div</div>
</body>
也是能實現去除浮動的效果。
優點
代碼簡潔
缺點
內容增多時候容易造成不會自動換行導致內容被隱藏掉,無法显示需要溢出的元素。
3、使用after偽元素清除浮動
:after 方式為空元素的升級版,好處是不用單獨加標籤了**
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用after偽元素清除浮動</title>
<style>
.clearfix:after { /*正常瀏覽器 清除浮動*/
content:"";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /*zoom 1 就是ie6 清除浮動方式 * ie7一下的版本所識別*/
}
.father {
border: 1px solid red;
width: 300px;
}
.big {
width: 100px;
height: 100px;
background-color: purple;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: blue;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>
優點
符合閉合浮動思想 結構語義化正確
缺點
由於IE6-7不支持:after,使用 zoom:1觸發 hasLayout。
注意
: content:”.” 裏面盡量跟一個小點,或者其他,盡量不要為空,否則再firefox 7.0前的版本會有生成空格。
4、使用before和after雙偽元素清除浮動
使用方法 將上面的clearfix樣式替換成如下
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
優點
代碼更簡潔
缺點
由於IE6-7不支持:after,使用 zoom:1觸發 hasLayout。
5、總結
1、在網頁主要布局時使用:after偽元素方法並作為主要清理浮動方式.文檔結構更加清晰;
2、在小模塊如ul里推薦使用overflow:hidden;(同時留意可能產生的隱藏溢出元素問題);
你如果願意有所作為,就必須有始有終。(9)
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】
※台北網頁設計公司這麼多,該如何挑選?? 網頁設計報價省錢懶人包”嚨底家”
※網頁設計公司推薦更多不同的設計風格,搶佔消費者視覺第一線
※想知道購買電動車哪裡補助最多?台中電動車補助資訊懶人包彙整
※小三通海運與一般國際貿易有何不同?
※小三通快遞通關作業有哪些?