浮动（Float）
目錄
浮動(dòng)（Float）
1、什么是文檔流？
2、什么是浮動(dòng)？
3、浮動(dòng)的特點(diǎn)
浮動(dòng)會(huì)脫離標(biāo)準(zhǔn)流
2.浮動(dòng)會(huì)影響元素的顯示方式
3、設(shè)置浮動(dòng)后，元素將沒有默認(rèn)寬度，需要手動(dòng)設(shè)置width：100%；
4、彼此相鄰的浮動(dòng)元素
5、逃不出父盒子的手掌心
4、清除浮動(dòng)
1、上下排列：
2、嵌套排列：
5、綜合案例
案例一，小米閃購時(shí)間模塊
案例二，淘寶業(yè)務(wù)模塊
案例三，導(dǎo)航條結(jié)構(gòu)
浮動(dòng)（Float）
1、什么是文檔流？
文檔流處在網(wǎng)頁的最底層，它表示的是一個(gè)頁面中的位置，我們所創(chuàng)建的元素默認(rèn)都處在文檔流中
元素在文檔流中的特點(diǎn)：
塊元素：在文檔流中會(huì)獨(dú)占一行，塊元素會(huì)自上向下排列
行內(nèi)元素：在文檔流中只占自身的大小，會(huì)默認(rèn)從左向右排列
2、什么是浮動(dòng)？
元素的浮動(dòng)是指設(shè)置了浮動(dòng)屬性的元素會(huì)脫離標(biāo)準(zhǔn)普通流的控制，浮動(dòng)的框可以向左或向右移動(dòng)，
直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?會(huì)挨著父元素左邊或右邊排列，如果之前有浮動(dòng)的元素 會(huì)挨著浮動(dòng)的元素排列)
由于浮動(dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。
浮動(dòng)的元素雖然會(huì)脫離正常的文檔流，但它還是會(huì)影響到正常文檔流中的文字排版。
在CSS中，通過float屬性來定義浮動(dòng)，其基本語法如下：
選擇器 {float: 屬性值; }| left | 元素向左浮動(dòng) |
| right | 元素向右浮動(dòng) |
| none | 元素不浮動(dòng)（默認(rèn)值） |
Float（浮動(dòng)），最早用來控制圖片，以便其他元素（特別是文字）實(shí)現(xiàn)環(huán)繞圖片的效果，但它在布局時(shí)一樣非常有用。
<p><img src="./img/a0.PNG" width="120px" height="80px">這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是 一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本 </p> img {float: left; }3、浮動(dòng)的特點(diǎn)
浮動(dòng)會(huì)脫離標(biāo)準(zhǔn)流
如果一個(gè)元素按照正常的標(biāo)準(zhǔn)流來顯示，會(huì)在html中所屬的位置上占位，后面的元素會(huì)緊跟著它，但是浮動(dòng)脫離了標(biāo)準(zhǔn)流，以后我們?cè)诳吹礁?dòng)的元素之后，不能以正常的標(biāo)準(zhǔn)流里進(jìn)行判斷
浮動(dòng)后會(huì)影響其他元素的顯示方式，因?yàn)槠渌貢?huì)當(dāng)他不存在。
浮動(dòng)的元素雖然會(huì)脫離正常的文檔流，但它還是會(huì)影響到正常文檔流中的文字排版。
2.浮動(dòng)會(huì)影響元素的顯示方式
浮動(dòng)后的行內(nèi)元素是可以設(shè)置寬高 ，塊級(jí)元素是內(nèi)容的寬高，說白了會(huì)改變他的模式display為inline-block
?float就是隱性的把內(nèi)聯(lián)元素轉(zhuǎn)化為塊元素，這是對(duì)內(nèi)部的特性就是有物理特性，但是他不占據(jù)一行。對(duì)外是內(nèi)聯(lián)元素的屬性
3、設(shè)置浮動(dòng)后，元素將沒有默認(rèn)寬度，需要手動(dòng)設(shè)置width：100%；
4、彼此相鄰的浮動(dòng)元素
如果你把幾個(gè)浮動(dòng)的元素放到一起，如果有空間的話，它們將彼此相鄰。
<img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/7266b3e7a65a9f11563c771a6aef55ea_254_96.jpg" alt="" width="120px" height="80px"> <img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/7266b3e7a65a9f11563c771a6aef55ea_254_96.jpg" alt="" width="120px" height="80px"> <img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/7266b3e7a65a9f11563c771a6aef55ea_254_96.jpg" alt="" width="120px" height="80px"> <img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/7266b3e7a65a9f11563c771a6aef55ea_254_96.jpg" alt="" width="120px" height="80px"> <img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/7266b3e7a65a9f11563c771a6aef55ea_254_96.jpg" alt="" width="120px" height="80px">img {margin: 10px;float: left; }嘗試調(diào)整瀏覽器大小，看一看圖片沒有足夠大小顯示時(shí)會(huì)做什么？? 會(huì)跟著動(dòng)
5、逃不出父盒子的手掌心
不管這么浮動(dòng)，都在父盒子里面。 記住：浮動(dòng)使用的原則，一般是 一起浮動(dòng)?
如果父元素沒有設(shè)置高度，浮動(dòng)的子元素不會(huì)撐開父元素
<style>img {margin: 10px;float: left;}div {width: 100px;height: 100px;border: 1px solid red;}</style><div><img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/7266b3e7a65a9f11563c771a6aef55ea_254_96.jpg" alt=""width="120px" height="80px"><img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/7266b3e7a65a9f11563c771a6aef55ea_254_96.jpg" alt=""width="120px" height="80px"><img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/7266b3e7a65a9f11563c771a6aef55ea_254_96.jpg" alt=""width="120px" height="80px"><img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/7266b3e7a65a9f11563c771a6aef55ea_254_96.jpg" alt=""width="120px" height="80px"><img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/7266b3e7a65a9f11563c771a6aef55ea_254_96.jpg" alt=""width="120px" height="80px"></div>4、清除浮動(dòng)
我們?yōu)槭裁匆宄?dòng)呢？
本來4個(gè)黃色盒子是在綠色盒子內(nèi)，因?yàn)閷?duì)4個(gè)黃色盒子使用了float浮動(dòng)，所以4個(gè)黃色盒子產(chǎn)生了浮動(dòng)，導(dǎo)致綠色盒子不能撐開，這樣浮動(dòng)就產(chǎn)生了。
<div class="wrap"><div></div><div></div><div></div><div></div></div>.wrap{border:1px solid green;width: 880px;margin:0 auto;}.wrap div{background: yellow;width: 200px;height: 100px;float: left;margin:10px;}1、上下排列：
清除浮動(dòng)clear屬性? (我被影響了，所以在我自己的標(biāo)簽內(nèi)添加clear）
這個(gè)屬性主要有三個(gè)值:
-
left 清除前面的左浮動(dòng)元素帶給我的影響
-
right清除前面的右浮動(dòng)元素帶給我的影響
-
both 同時(shí)清除前面的左右浮動(dòng)元素帶給我的影響. 一般情況下選擇這個(gè)值比較方便.
clear:both; clear就是清除,both指的是左浮動(dòng),右浮動(dòng)都要清除.意思就是:清除別人對(duì)我的影響
原理：父元素和冗余元素的高度都為0，并且浮動(dòng)元素會(huì)蓋在其上方，當(dāng)設(shè)置clear：both時(shí)，冗余元素會(huì)躲開浮動(dòng)元素直到不被其蓋住，而父元素為了包裹住他自然就撐開了
2、嵌套排列：
當(dāng)父元素沒有高度時(shí)，子盒子設(shè)置浮動(dòng) 會(huì)影響父元素后邊的元素,稱為高度塌陷。
高度塌陷的解決方法：
a 只需要給父元素加上高度：會(huì)導(dǎo)致布局不是很靈活
b 設(shè)置父元素overflow：hidden（BFC）：當(dāng)子盒子高度需要超出父元素高度時(shí)，會(huì)受到影響
c 設(shè)置dispaly： inlin-block（BFC）：會(huì)影響到后面的布局
d 給浮動(dòng)子盒子后加一個(gè)兄弟空標(biāo)簽 給空標(biāo)簽加clear：會(huì)多加一個(gè)標(biāo)簽
<div class="empty"></div>.empty {clear: both;}e 給父元素設(shè)置after偽類清除：設(shè)置父元素中的最后一個(gè)子元素? ? ?推薦（是空標(biāo)簽的加強(qiáng)版）
.fa::after{display: block;content: "";clear: both; }<div class="fa"><div class="sn"></div></div> 給sn設(shè)置了浮動(dòng)，fa被影響了，所以給fa寫clearf 給父元素也設(shè)置浮動(dòng)讓它與子盒子在統(tǒng)一文檔流下就能被撐開了：會(huì)影響后面的盒子
5、綜合案例
案例一，小米閃購時(shí)間模塊
案例二，淘寶業(yè)務(wù)模塊
* {margin: 0;padding: 0; }a {text-decoration: none; } ul,li {list-style-type: none; } ul {width: 289px;margin: 40px auto; } li {width: 71px;height: 75px;float: left;text-align: center;border-left: 1px solid #ccc;border-top: 1px solid #ccc; } a span {background-image: url(./img/sprit.png);width: 26px;height: 26px; display: block;background-size: 100%;margin: 10px auto; } li p {color: black; } .youxi {border-right: 1px solid #ccc; } .caipiao,.dianying,.jiudian,.licai {border-bottom: 1px solid #ccc; } .licai {border-right: 1px solid #ccc; } .chexian span {background-position: 0 -46px; } .lvxing span {background-position: 0 -94px; } .youxi span {background-position: 0 -142px; }<ul><li class="huafei"><a href=""><span></span><p>充話費(fèi)</p></a></li><li class="chexian"><a href=""><span></span><p>車險(xiǎn)</p></a></li><li class="lvxing"><a href=""><span></span><p>旅行</p></a></li><li class="youxi"><a href=""><span></span><p>游戲</p></a></li><li class="caipiao"><a href=""><span></span><p>彩票</p></a></li><li class="dianying"><a href=""><span></span><p>電影</p></a></li><li class="jiudian"><a href=""><span></span><p>酒店</p></a></li><li class="licai"><a href=""><span></span><p>理財(cái)</p></a></li></ul>?
案例三，導(dǎo)航條結(jié)構(gòu)
<header><nav><p>主頁</p><p>新聞</p><p>聯(lián)系我們</p><p>關(guān)于我們</p></nav></header><div class="container"><aside><ul><li>HTML5</li><li>CSS</li><li>javaScript</li><li>Node.js</li><li>vue.js</li><li>react.js</li><li>小程序</li></ul></aside><article><h1 class="title">這是標(biāo)題</h1><section><h2>HTML5</h2><P>1.體溫異常者，嚴(yán)禁進(jìn)入教室。學(xué)生在教室如出現(xiàn)咳嗽、發(fā)燒、乏力應(yīng)主動(dòng)減少與他人接觸，立即上報(bào)輔導(dǎo)員并離開教室。 2.學(xué)生做好個(gè)人防護(hù)，在教室內(nèi)應(yīng)自覺各位就坐，應(yīng)打開自習(xí)室窗戶，保持良好通風(fēng)，暫停使用空調(diào)。1.體溫異常者，嚴(yán)禁進(jìn)入教室。學(xué)生在教室如出現(xiàn)咳嗽、發(fā)燒、乏力應(yīng)主動(dòng)減少與他人接觸，立即上報(bào)輔導(dǎo)員并離開教室。 2.學(xué)生做好個(gè)人防護(hù)，在教室內(nèi)應(yīng)自覺各位就坐，應(yīng)打開自習(xí)室窗戶，保持良好通風(fēng)，暫停使用空調(diào)</P><p>1.體溫異常者，嚴(yán)禁進(jìn)入教室。學(xué)生在教室如出現(xiàn)咳嗽、發(fā)燒、乏力應(yīng)主動(dòng)減少與他人接觸，立即上報(bào)輔導(dǎo)員并離開教室。 2.學(xué)生做好個(gè)人防護(hù)，在教室內(nèi)應(yīng)自覺各位就坐，應(yīng)打開自習(xí)室窗戶，保持良好通風(fēng)，暫停使用空調(diào)</p></section></article></div><footer><p>底部文字</p></footer>* {margin: 0;padding:0 ; } header nav {background-color: rgb(119,119,119);height: 50px;width: 1220px; } nav p {height: 100%;line-height: 50px;float: left;margin-left:10px;color: white;font-weight: 400px;padding-left: 10px;padding-right: 10px; } nav>p {margin-left: 0; }nav p:hover {background-color: green; }aside ul {margin: 10px 10px; } aside li {width: 180px;height: 35px;line-height: 35px;background-color: rgb(238,238,238);margin-bottom: 5px;font-family: Verdana;font-weight: lighter;color: #ccccccdd; } .container {float: left; } aside {float: left; }aside li:hover {background-color: rgb(32, 96, 104);color: white; } article {float: right;margin: 10px 10px; } article h1 {font-size: large;text-align: center;color: white;width: 1000px;height: 110px;line-height: 110px;background-color: rgb(33,150,243); } article section {width: 1000px;margin-top: 10px; } article p {margin-top: 10px;margin-bottom: 10px; } footer {clear: both;width: 1220px;height: 60px;margin-top: 500px;background-color: hsl(0, 4%, 18%); } footer p {text-align: center;height: 60px;line-height: 60px;color: white; }總結(jié)
- 上一篇： PowerDesigner 逆向工程 从
- 下一篇： 自然语言理解——introduction