css提供了三種傳統(tǒng)的布局方式（盒子如何排列）

普通流（標(biāo)準(zhǔn)流）

定義：就是盒子按規(guī)定的默認(rèn)方式排列

1.塊級(jí)元素會(huì)獨(dú)占一行，比如；div, hr, p, h1-h6, ul, ol;

2.行內(nèi)元素就會(huì)按從左到右的方式排列，比如；span, a, i ,em等

浮動(dòng)

首先有幾個(gè)問題。

1.為什么需要浮動(dòng)？

很多布局標(biāo)準(zhǔn)流無法完成，浮動(dòng)可以改變?cè)心J(rèn)的位置。典型操作：可以把多個(gè)塊級(jí)元素放在一行排列顯示。

網(wǎng)頁布局口令：多個(gè)塊級(jí)元素縱向找標(biāo)準(zhǔn)流，橫向找浮動(dòng)。

2。什么是浮動(dòng)？

屬性float用于創(chuàng)建浮動(dòng)。語法? 選擇器{float;屬性值}

3.浮動(dòng)的特性

脫標(biāo)（浮動(dòng)的盒子不會(huì)在原來的位置）

浮動(dòng)的元素會(huì)一行顯示并頂部對(duì)齊

任何盒子都會(huì)浮動(dòng)，浮動(dòng)的元素會(huì)有行內(nèi)塊的特性

盒子浮動(dòng)就像排隊(duì)一樣，浮動(dòng)后的元素不占用空間。

4.浮動(dòng)應(yīng)該注意的地方

如果塊級(jí)盒子沒有設(shè)置寬度，那么就默認(rèn)和父級(jí)一樣。

浮動(dòng)的盒子只會(huì)影想后面的標(biāo)準(zhǔn)流不會(huì)影響前面的。

4.浮動(dòng)元素元素經(jīng)常和標(biāo)準(zhǔn)流父級(jí)使用

父級(jí)一般不會(huì)設(shè)置高度，因?yàn)榭偤凶拥母叨炔淮_定。

?清除浮動(dòng)

1.為什么要清除浮動(dòng)？

父盒子沒有給高度，但是子盒子浮動(dòng)又沒有占位置，父盒子的高度為0，就會(huì)影響下面的盒子。

2.消除浮動(dòng)的方法。

1.

選擇器{clear:屬性值}

額外標(biāo)簽法

額外標(biāo)簽法 會(huì)在浮動(dòng)元素末尾添加一個(gè)空的標(biāo)簽。例如 <div style=”clear:both”></div>，或者其他標(biāo)簽，這個(gè)新的標(biāo)簽一定是塊級(jí)元素。 （如<br />等） ? 優(yōu)點(diǎn)： 通俗易懂，書寫方便 ? 缺點(diǎn)： 添加許多無意義的標(biāo)簽，結(jié)構(gòu)化較差 父級(jí)添加 overflow 可以給父級(jí)添加 overflow 屬性，將其屬性值設(shè)置為 hidden、 auto 或 scroll 。 子不教,父之過,注意是給父元素添加代碼 ? 優(yōu)點(diǎn)：代碼簡(jiǎn)潔 ? 缺點(diǎn)：無法顯示溢出的部分 :after 偽元素法 .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7 專有 */ *zoom: 1; } ? 優(yōu)點(diǎn)：沒有增加標(biāo)簽，結(jié)構(gòu)更簡(jiǎn)單 ? 缺點(diǎn)：照顧低版本瀏覽器 ? 代表網(wǎng)站： 百度、淘寶網(wǎng)、網(wǎng)易等 雙偽元素清除浮動(dòng) .clearfix:before,.clearfix:after {content:"";display:table; }.clearfix:after {clear:both; }.clearfix {*zoom:1; } ? 優(yōu)點(diǎn)：代碼更簡(jiǎn)潔 ? 缺點(diǎn)：照顧低版本瀏覽器 ? 代表網(wǎng)站：小米、騰訊等

?

3. 清除浮動(dòng)本質(zhì)

? 清除浮動(dòng)的本質(zhì)是清除浮動(dòng)元素造成的 影響 ? 如果父盒子本身有高度，則不需要清除浮動(dòng) ? 清除浮動(dòng)之后，父級(jí)就會(huì)根據(jù)浮動(dòng)的子盒子自動(dòng)檢測(cè)高度。父級(jí)有了高度，就不會(huì)影響下面的標(biāo)準(zhǔn)流了 前端日記： 剛開始學(xué)前端，現(xiàn)在大一，用這個(gè)方法記住所學(xué)的知識(shí)點(diǎn)，是 看pink老師的視頻總結(jié)的筆記。希望自己每天都能發(fā)一篇筆記博客。記錄成長(zhǎng)。一起去未來！我有懷疑過自己是不是真的不適合，但既來之，則安之。 我走的每一步路都算數(shù)。

總結(jié)

以上是生活随笔為你收集整理的前端css之 浮动 自学日记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。