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