整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
CSS世界中的float屬性是一個年代非常久遠的屬性。雖然最初創(chuàng)造浮動并不是為了用于頁面布局，但它在布局方面表現(xiàn)得很出色。然而為了理解浮動，我們首先必須牢記它的設(shè)計初衷。Web誕生之初，帶寬就那么一點點，我們能夠做到的也只是展示文字以及零星圖片而已，怎么可能浮動設(shè)計的目的就是為了實現(xiàn)各種磚頭式的復雜布局呢？那個年代復雜布局都是用<table>實現(xiàn)的。既然這樣，那float屬性設(shè)計的目的究竟是什么呢？
很簡單，一句話：浮動的本質(zhì)就是為了實現(xiàn)文字環(huán)繞效果。而這種文字環(huán)繞，主要指的就是文字環(huán)繞圖片顯示的效果。所以，大家應該也多少對為什么老IE瀏覽器與浮動相關(guān)的bug一火車都裝不下有些了解了吧！人家的功能本來就很單純，只是讓文字可以繞著圖片跑，你偏要各種布局，結(jié)果撐不住了吧！
所以說：浮動是魔鬼，少砌磚頭、少浮動，要更多地去挖掘CSS世界本身的“流動性”和“自適應性”，以構(gòu)建能夠適用于各種環(huán)境的高質(zhì)量的網(wǎng)頁布局。好的網(wǎng)頁應該如同好的建筑。傳統(tǒng)的樓房是典型的“剛”式結(jié)構(gòu)，磚頭加樓板，問題不言而喻，一個小小的地震可能就被夷為平地；而好的樓房應該是有“柔”在其中，也就是高質(zhì)量的鋼筋結(jié)構(gòu)，當?shù)卣饘е路课輷u晃的時候，可以通過鋼筋的“柔性”卸力而保障整體結(jié)構(gòu)的穩(wěn)固。臺風襲來，很少見到說柔弱的柳樹被吹倒，反而會經(jīng)常看到堅固的電線桿被風吹倒的消息，道理其實也類似。
浮動有三個關(guān)鍵字可以選擇，left為向左浮動，right為向右浮動，none為不浮動。無論是行內(nèi)元素（inline）還是塊級元素（block），設(shè)置浮動后都會變成塊級元素。但表現(xiàn)得卻更像行內(nèi)塊元素（inline-block），因為在沒有明確寬度的時候，寬度會隨著內(nèi)容自適應，而不是占據(jù)一行。
過去，浮動的行為經(jīng)常受到瀏覽器bug的干擾，特別是在IE6和IE7中。幸虧這些瀏覽器幾乎已經(jīng)淡出市場了，我們不必再擔心那些bug了。現(xiàn)在我們可以保證各種瀏覽器對浮動的處理是一致的。但是浮動仍有一些行為會讓你措手不及。這些并不是bug，而是因為浮動嚴格遵循了標準。讓我們來看看浮動如何工作，以及怎樣調(diào)整浮動的行為來實現(xiàn)理想的布局。
float都有哪些有意思的特性呢？具體如下：
所謂“包裹性”，由“包裹”和“自適應性”兩部分組成。包裹假設(shè)浮動元素父元素寬度180px，浮動元素子元素是一個120px寬度的圖片，則此時浮動元素寬度表現(xiàn)為“包裹”，就是里面圖片的寬度120px，代碼如下：
.div { width: 180px; }
.float { float: left; }
.float img { width: 120px; }
<div class="div">
<div class="float">
<img src="float.jpg">
</div>
</div>自適應性，如果浮動元素的子元素不只是一張120px寬度的圖片，還有一大波普通的文字，例如：
<div class="father">
<div class="float">
<img src="float.jpg">大家好，我是碼農(nóng)洞見。
</div>
</div>則此時浮動元素寬度就自適應父元素的180px寬度，最終的寬度表現(xiàn)也是180px。
塊狀化的意思是，元素一旦float的屬性值不為none，則其display計算值就是block或者table。
float通過破壞正常CSS流實現(xiàn)CSS環(huán)繞，帶來了煩人的“高度塌陷”的問題，然而，凡事都具有兩面性，只要了解透徹，說不定就可以變廢為寶、化腐朽為神奇。例如。我們可以利用float破壞CSS正常流的特性，實現(xiàn)兩欄或多欄的自適應布局。
浮動會影響周圍元素，并且還會引發(fā)很多意想不到的問題。在CSS中，我們可以使用clear屬性來清除浮動帶來的影響。clear屬性語法如下：
clear: none | left | right | both在實際開發(fā)中，我們幾乎不會使用“clear:left”或“clear:right”來單獨清除左浮動或右浮動，往往都是直截了當?shù)厥褂谩癱lear:both”來把所有浮動清除，既簡單又省事。也就是說，我們只需要記住“clear:both”就可以了。
通過閱讀本文我們了解到浮動的設(shè)計初衷是讓文字圍繞一個元素排列，但有時這種效果并不是我們想要的。使用清除浮動來包含浮動元素。所謂生生相克，既然有破壞，就有保護其他元素不被破壞的屬性。總之，只有深入理解浮動的工作原理，勤加練習才有可能避開常見的陷阱。達到選擇合適的工具來實現(xiàn)想要的效果。
為初學者提供學習指南，為從業(yè)者提供參考價值。我堅信碼農(nóng)也具有產(chǎn)生洞見的能力。關(guān)注【碼農(nóng)洞見】，一起學習和交流吧！
天給大家?guī)砹怂膫€線條進行環(huán)繞的加載中的效果，我放大了給你們看看，但是你們可以看到，每個線條的旋轉(zhuǎn)動作是一個圓形。
下面是代碼區(qū)域，我使用的是vivo試圖容器，里面包含了第二個試圖容器，里面有五個vivo試圖容器，前面這四個代表著四根線條，線條下面是文字。主要的是css代碼區(qū)域，我使用的是開發(fā)工具是s plus x，是開發(fā)uniap的。
先給大家解釋一下代碼部分。
·首先是第一個vivo式圖容器，使用彈性布局集中對齊，頂部距離進行相反像素的設(shè)置。
·第二個又是圖中簽，也是進行絕對定位，集中對齊相對定位等。
·下面就是h三，文字是白色，大家可以看到知道。
·這是第一個線條，設(shè)置了一個寬度、高度、邊框、透明度、圓角、絕對定位。主要是第一根線條的動作是個動畫，進行了應用旋轉(zhuǎn)動畫，無限循環(huán)。邊框顏色為了粉色，大家可以看到粉色，因為為什么這么細？大家可以看到因為在防木人狀態(tài)下設(shè)置了一個一的邊框，線條的寬度是一，所以是細的。
·第二個就是第一個線條動畫，它引用是哪個動畫？就是下面設(shè)置一個旋轉(zhuǎn)角度和結(jié)束的旋轉(zhuǎn)角度形成一個圓形，從五十到一百一，再從五十到四百七，大家可以看一下形成這么個動畫。
·下面第二根線條、第三根線條、第四根線條基本上都是一樣的動畫，所以大家只需要把第一根線條的寫法知道就行了。
·下面的其實位置的變化而已和顏色大家可以看到，其他地方基本上沒有太多的區(qū)別，就是美國旋轉(zhuǎn)的角度是不一樣的。第一個旋轉(zhuǎn)角度是四百七，第二個是三百八，然后是九十，然后是六百三，就這不一樣，價格方都是一樣的。
感興趣的同學可以找我嘮嗑進行獲取元代碼，進行二十四的編寫也可以，也可以自己去手動去學。
喜歡的可以點贊收藏一下，本期就講到這。
float屬性
float屬性,可以將元素向左或向右推,以允許其它元素環(huán)繞它.
float通常與圖像一起使用,但在處理布局時也很有用.
float屬性的值是left,right和none.
●left,right會使元素向左或向右浮動.
●none能確保元素不會進行浮動.
元素是水平浮動的,這以為著元素只能左右浮動,不能上下浮動.
如果連續(xù)放置幾個浮動的元素,那么如果有足夠的空間,它們將相互浮動.
例如,在設(shè)置頁面布局中,可以通過設(shè)置浮動將圖像和文本設(shè)置到頁面中,使得文本可以跟圖像并排顯示.
二 清除float
元素設(shè)置了float屬性后,會使后面的元素都受其影響,將環(huán)繞在其周圍.為了避免這種情況,請使用clear屬性.
clear屬性指定某個元素不受其他設(shè)置了float屬性的元素的影響.
在下面的例子中,如果我們將div元素設(shè)置為float屬性,則div元素后面的段落將環(huán)繞在圖像周圍.
html代碼:
<body>
這段落在div元素之上
不受浮動屬性的影響
<div class="floating"><image src="background-image.jpg"/></div>
這段落在div元素之后
受浮動屬性的影響.
<div>這一段也在div元素之后
受浮動屬性的影響
</div>
</body>
css代碼:
.floating{float:right;}
效果如下:
如果有一個具有float屬性的元素,在這個元素之后的那些元素都將受到影響.
clear屬性可以使用right,left和both來指定某一個元素不受其他浮動元素的影響.
默認值是none,它不清除任何浮動屬性,它允許在兩邊都有浮動元素.
both用來清除左右兩個水平方向的浮動效果.
三 overflow屬性
頁面上的每個元素都是一個盒子.如果沒有設(shè)置盒子的高度,那么盒子的高度將隨著所需的內(nèi)容的增大而變大.
html代碼:
<div>
這個文本在div元素里面,它有一個藍色的
背景顏色,并浮動在左側(cè).我們設(shè)定一個具體的
div元素的高度和寬度,正如你所看到的,這樣會導致文本內(nèi)容的溢出.
</div>
css代碼:
div{width:150px;height:150px;background-color:LightBlue; float:left; }
效果如下:
overflow屬性有四個值:visible(默認值),scroll,hidden和auto
scroll值能阻止內(nèi)容溢出,但會增加出滾動條,通過拉動滾動條可以瀏覽所有內(nèi)容.
css代碼:
div{width:150px; height:150px; background-color:LightBlue; float:left; overflow:scroll;}
效果如下:
auto:如果內(nèi)容溢出被限制,則會添加一個滾動條,使超出的內(nèi)容可以通過滾動展示出來.
hidden:隱藏掉內(nèi)容溢出的內(nèi)容.
overflow的默認值是visible
四 z-index屬性
當元素位于正常流程順序之外時(受position等屬性影響時),它們可以重疊于其他元素.
z-index屬性指定元素的堆棧順序(通過z-index的值可以決定哪個元素應放置在其他元素的前面或后面)
html代碼:
<div class="blue">blue(w3cschool)</div>
<div class="red">red(w3cschool)</div>
css代碼:
.blue{background-color:#8EC4D0; margin-bottom:15px;width:120px; height:120px; color:#FFF;}
.red{background-color:#FF4D4D; position:relative;width:120px; height:120px; color:#FFF; margin-top:-50px; margin-left:50px;}
效果如下:
紅框與藍框重疊,紅框會位于藍框上方,因為紅框是后加載的.
設(shè)置z-index屬性可以改變這個順序
為藍色div元素指定較高的z-index值,為紅色div元素指定較低的z-index值(值大的元素重疊在上邊.)
css代碼:
.blue{background-color:#8EC4D0; margin-bottom:15px;width:120px; height:120px; color:#FFF; z-index:4;}
.red{background-color:#FF4D4D; position:relative;width:120px; height:120px; color:#FFF; margin-top:-50px; margin-left:50px;z-index:2;}
z-index僅適用于定位元素(position:absolute,position:relative或position:fixed)
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
