整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
文檔流
是瀏覽器解析網(wǎng)頁的一個重要概念。對于一個XHTML網(wǎng)頁，body元素下的任意元素，根據(jù)其先后順序，組成了一個上下關(guān)系，這便是文檔流。瀏覽器根據(jù)這些元素的順序去顯示它們在網(wǎng)頁中的位置。文檔流是瀏覽器的默認(rèn)顯示規(guī)則。
Float
1）浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
2）由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣。
請看下圖，當(dāng)把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：
例1：
例2：
再請看下圖，當(dāng)框 1 向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據(jù)空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。
例3：
如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。
例4：
如果浮動元素的高度不同，那么當(dāng)它們向下移動時可能被其它浮動元素“卡住”：
例5：
浮動元素會生成一個塊級元素，而不論它本身是何種元素。
代碼：
<head>
<style type="text/css">
span{ float:left; width:100px; height:100px; background-color: #FFCCCC}
</style>
</head>
<body>
<span>內(nèi)聯(lián)元素浮動會變成塊</span>
</body>
效果：
解釋：內(nèi)聯(lián)元素?zé)o法設(shè)置寬高，但是加了float后便可以，說明浮動的元素都是塊。
· 如果未給浮動元素設(shè)置寬度，那么其寬度為內(nèi)容寬度。
代碼：
<head>
<style type="text/css">
div{ float:left;background-color: #FFCCCC}
</style>
</head>
<body>
<div>浮動元素的默認(rèn)寬度看內(nèi)容</div>
</body>
效果：
解釋：div是個塊級元素，默認(rèn)寬度為父級容器的100%，但是加上浮動后，寬度變的符合內(nèi)容，可見，浮動的元素，如果不設(shè)置寬度，那么它會根據(jù)內(nèi)容自適應(yīng)寬度。
SS 浮動（float）屬性定義元素的浮動方向。
浮動元素會向左或向右移動，直到它的外邊緣碰到包含它的元素或另一個浮動元素的邊緣為止。這被稱為浮動上下文。
浮動元素會從文檔流中提出，因此它們不會占據(jù)原來的位置。剩余的元素會在浮動元素之上渲染，因此浮動元素會影響布局。
float: left | right | none | inherit;
示例：
楚浮動對于前端學(xué)習(xí)者是比較了解的，剛開始接觸前端就需要了解，那你知道HTML/css清除浮動的方法都有哪些？小猿圈web前端講師總結(jié)了幾個方法，希望可以幫助你學(xué)習(xí)前端。
清除浮動
當(dāng)父容器沒有設(shè)置高度，里面的盒子沒有設(shè)置浮動的情況下會將父容器的高度撐開。一旦父容器中的盒子設(shè)置浮動，脫離標(biāo)準(zhǔn)文檔流，父容器立馬沒有高度，下面的盒子會跑到浮動的盒子下面。出現(xiàn)這種情況，我們需要清除浮動
清除浮動不是不浮動，是清除浮動產(chǎn)生的不利影響
清除浮動的方法
* 給浮動元素的父元素設(shè)置高度
* 額外標(biāo)簽法
>給最后一個浮動元素后邊添加額外標(biāo)簽，使用clear:both; 不推薦使用，會產(chǎn)生冗余代碼。
* 給浮動元素的父元素使用overflow:hidden; 觸發(fā)bfc,
>如果有子元素，出了父元素的范圍，多出的部分會隱藏掉。
* 后偽元素清除浮動
給浮動元素的父元素使用clearfix
.clearfix:after {
content:”.”;
display:block;
height: 0;
line-height: 0;
visibility:hidden;
clear:both;
}
.clearfix {
*Zoom: 1;
}
* 雙偽元素清除浮動
給浮動元素的父元素使用雙偽元素清除浮動
.clearfix:before,.clearfix:after {
content:'''';
display: table;
}
.clearfix:after {
clear: both;
}
以上就是小猿圈web前端講師對于HTML/css清除浮動的方法的介紹，既然學(xué)到了那就去快去試驗一下吧，記住學(xué)習(xí)上或者工作上遇到什么問題可以到小猿圈網(wǎng)站上尋找答案的，里面有最新最全的視頻還有助教老師指導(dǎo)你學(xué)習(xí)。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
