整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
設(shè)置浮動(dòng)的元素可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>
設(shè)置浮動(dòng)的元素脫離文檔流。
如圖我們可以看出框1向右浮動(dòng)后脫離文檔流，直到碰到邊緣。框2框3按照正常的文檔流順序排列。
圖1 框1浮動(dòng)
如圖2，我們讓框1向右浮動(dòng)，可以清楚的看懂框1浮動(dòng)之后脫離文檔流，不占用空間。三個(gè)框都向左移動(dòng)，那么框 1 向左浮動(dòng)直到碰到包含框，另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框。
圖2
如圖3，如果包含框太窄，無(wú)法容納水平排列的三個(gè)浮動(dòng)元素，那么其它浮動(dòng)塊向下移動(dòng)，直到有足夠的空間。如果浮動(dòng)元素的高度不同，那么當(dāng)它們向下移動(dòng)時(shí)可能被其它浮動(dòng)元素“卡住”。
圖3
我們來(lái)看一個(gè)例子：
<div class="box"></div>
<p>要想阻止行框圍繞浮動(dòng)框，需要對(duì)該框應(yīng)用 clear 屬性。clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應(yīng)該挨著浮動(dòng)框。</p>
我們給它div加點(diǎn)樣式,并給它設(shè)置左浮動(dòng)：
按我們說(shuō)的，div脫離文檔流之后，P元素會(huì)按照正常的文檔流順序排列，也就是說(shuō)p元素有一部分是被div擋住的。
為了解決這個(gè)，我們可以用clear清除浮動(dòng)。
clear 屬性的值可以是 left、right、both 或 none，它表示給元素的哪一邊清除浮動(dòng)。
一般做法，我們可以寫(xiě)一個(gè)空的div，然后給它加一個(gè)清除浮動(dòng)的類(lèi)：
給類(lèi)加一個(gè)屬性clear：
我們看一下效果，
童靴們理解了嗎，不懂的可以留言或者私信。
愛(ài)學(xué)習(xí)的孩子運(yùn)氣不會(huì)差哦~
關(guān)注小白前端，持續(xù)收到文章推送！
么是浮動(dòng)塌陷？
當(dāng)子元素設(shè)置浮動(dòng)時(shí)，父元素中所有孩子盒子都是float，則父容器的高度為0。
1.在父親盒子中的最下邊添加一個(gè)空div盒子，并設(shè)置clear為相應(yīng)的值，如果不清除塌陷，那么父元素高度為0，給ul設(shè)置高度就沒(méi)有效果。
clear常見(jiàn)取值如下：
left：清除左側(cè)浮動(dòng)引起的塌陷；
right：清除右側(cè)浮動(dòng)引起的塌陷；
both：清除左右兩側(cè)浮動(dòng)引起的塌陷。
2.
先給浮動(dòng)一個(gè)定義:浮動(dòng)就是程序中定位的一種
那么什么又是定位:元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置在哪兒
浮動(dòng)定位：解決了多個(gè)塊級(jí)元素能在一行內(nèi)顯示。
什么是浮動(dòng)定位。可以用如下幾個(gè)特點(diǎn)定義。
特點(diǎn)一：將元素排除在文檔流之外，即元素脫離文檔流，不受默認(rèn)排列方式（從上到下或者從左往右）的控制
特點(diǎn)二：浮動(dòng)起來(lái)的元素將不再占用頁(yè)面的空間。（元素從瀏覽器上原地拔起，從上往下依舊能看到浮動(dòng)元素），有可能會(huì)壓住其他的元素。
特點(diǎn)三：元素會(huì)停靠在包含框（父層元素）的左邊或左邊，或者停靠在已經(jīng)浮動(dòng)的元素的左邊或者右邊
特點(diǎn)四：元素?zé)o論怎么浮動(dòng)，最終還是在包含框之內(nèi)。
特點(diǎn)五：塊級(jí)浮動(dòng)之后，寬度自適應(yīng)不是100%
特點(diǎn)六：行內(nèi)元素浮動(dòng)后，除了具備以上特點(diǎn)，它將變成塊級(jí)元素，行內(nèi)元素設(shè)置浮動(dòng)多數(shù)是為了改變寬和高。
浮動(dòng)屬性：
float:定義當(dāng)前元素浮動(dòng)
取值：
none（默認(rèn)沒(méi)浮動(dòng)）
left（浮動(dòng)方向左邊）
right（浮動(dòng)方向右邊）
下面做一個(gè)小練習(xí)希望對(duì)web愛(ài)好者有一個(gè)小小的幫助。可以拿代碼過(guò)去看效果哦！
<!DOCTYPE HTML>
<html>
<head>
<title>文字屬性</title>
<meta charset="utf-8">
<style>
div{
width:200px;
height:200px;
}
#d1{
background-color:red;
float:right;
/*一共三個(gè)div塊級(jí)元素上下排列，設(shè)置第一個(gè)div向右浮動(dòng)，后面兩個(gè)補(bǔ)上*/
}
#d2{
background-color:yellow;
}
#d3{
background-color:green;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>
更多知識(shí)關(guān)注小編，或者百度網(wǎng)絡(luò)營(yíng)銷(xiāo)師鐘震，鐘震講網(wǎng)絡(luò)營(yíng)銷(xiāo)。會(huì)有很多相關(guān)知識(shí)，公眾號(hào)網(wǎng)絡(luò)營(yíng)銷(xiāo)師鐘震，以后每天都會(huì)分享web，淘寶運(yùn)營(yíng)，競(jìng)價(jià)，網(wǎng)站建設(shè)和優(yōu)化，社媒方面的知識(shí)。與大家共同進(jìn)步。希望對(duì)您有一點(diǎn)點(diǎn)幫助，喜歡記得關(guān)注公眾號(hào)。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
