溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
浮動原理及清除浮動
上節(jié)回顧
在上節(jié)的《Web前端入門學習（4）—— 塊級元素和行內元素之特征與轉換》中(http://cherry360.blog.51cto.com/12176744/1863945)，介紹了塊級元素和行內元素的特征，及粗略介紹了如何進行轉換。加上display屬性，可以指定元素的類型，如display:block、display:inline，以及display:inline-block。當然用得最多的是最后一個display:inline-block。結合例子來看：
例1：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>無標題文檔</title>
<style>
div,span{height:100px;width:100px;background:blue;border:1px solid red;}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<span>span1</span>
<span>span2</span>
</body>
</html>顯示結果：
例2，如果在css樣式中加上display:inline-block,即把CSS樣式改成：
div,span{
height:100px;
width:100px;
background:blue;
border:1px solid red;
display:inline-block;
}顯示效果將會變成：
從上面的對比結果可以看出，屬性display:inline-block的效果是，可以把塊級元素在同一行內顯示，而行內元素也變得支持寬高。但是使用這種方式，也有一些隱患問題，就是換行被解析。也就是說，標簽之間換行之后，顯示出來的效果中間是存在間隙的，并且不同瀏覽器之間的間隙大小不一致。此外，IE6、IE7是不支持塊級元素的inline-block效果。那么有其他辦法可以解決嗎？這就是本節(jié)需要討論的問題了。
浮動原理
任何元素都可以被浮動，浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框位置；由于浮動框不在文檔流中，所以文檔流中的元素會表現得就像浮動框不存在一樣。文檔流是文檔中可顯示對象在排列時所占用的位置。話不多說，看例子最直觀：
例3：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>無標題文檔</title>
<style>
div,span{height:100px;width:100px;background:blue;border:1px solid red;float:left;}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<span class="span1">span1</span>
<span class="span2">span2</span>
</body>
</html>顯示結果：
本例的結果和例2的結果，代碼區(qū)別在于把display:inline-block改成float:left，而顯示結果的區(qū)別是標簽換行沒有被解析。還有一些特點現在通過肉眼還無法看出來，就是使用float屬性的元素會脫離文檔流，現在看看下面例子：
例4：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>無標題文檔</title>
<style>
.box1{width:100px;height:100px;background:red;float:left;}
.box2{width:200px;height:200px;background:blue;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>顯示結果：
從例4可以看出，紅色塊盒子使用了left浮動，而藍色塊盒子沒有使用浮動元素，因此紅色塊脫離了文檔流，而藍色塊盒子好像看不到紅色塊盒子一樣，重疊在一起了。
綜上所得，總結出浮動元素的幾個特征：
內聯元素支持寬高；
塊元素可以在同行顯示；
寬度由內容撐開；
脫離文檔流；
提升層級半層。
了解了浮動原理之后，我們知道使用float屬性的元素會脫離文檔流，那么其他沒有使用浮動屬性的元素會看不到它們，從而導致出現重疊這種狀況，如何解決呢？那么現在就引入一個清除浮動的知識點了。
例5：
在例4的代碼中，把box2的樣式改成：
.box2{ width:200px;height:200px;background:blue;clear:left;}顯示結果：
屬性clear把紅色塊盒子的左浮動清除了，所以藍色塊盒子不再和紅色盒子重疊在一起。這里僅是簡單介紹清除浮動的辦法之一，當然還有很多辦法，在此僅作入門了解。
溫馨提示
：
float浮動屬性值：left/right/none；
clear清除浮動屬性值：left/right/both/none。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
