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