CSS浮動float

chenatu 發(fā)布于2019-08-29 18:39 / 2599人閱讀

摘要：從俯視圖看似乎沒有脫離文檔流。元素像流水一樣圍繞著元素行內(nèi)元素會圍繞著浮動的元素進(jìn)行排列清除浮動可以理解為打破橫向排列。對于的清除浮動，一定要牢記這個規(guī)則只能影響使用清除的元素本身，不能影響其他元素。

參考教程（經(jīng)驗(yàn)分享：CSS浮動(float,clear)通俗講解）

首先了解一下標(biāo)準(zhǔn)文檔流的排版：從上到下，從左到右，遇塊換行

浮動可以理解為讓某個div元素脫離文檔流，漂浮在文檔流之上

block元素?zé)o視float元素

啥意思呢，就是A和B兩個block(塊級)元素在排隊(duì)買東西，A在前面，那么B只能遵守規(guī)則（標(biāo)準(zhǔn)文檔流的遇塊換行）突然A膨脹了，飄了，然后B就無視A,前進(jìn)一步跑到A下面。

下圖就是這種情況。

? but，如果此時A沒有浮動，而B浮動了，此時他只漂浮在自己的位置上方。從俯視圖看似乎沒有脫離文檔流。

inline元素像流水一樣圍繞著float元素

行內(nèi)元素會圍繞著浮動的元素進(jìn)行排列

清除浮動可以理解為打破橫向排列。

? 語法：

? clear : none | left | right | both

? 取值：

? none : 默認(rèn)值。允許兩邊都可以有浮動對象

? left : 不允許左邊有浮動對象

? right : 不允許右邊有浮動對象

? both : 不允許有浮動對象

例子：

假如頁面中只有兩個元素div1、div2，它們都是左浮動，場景如下：

如果想要清除浮動，很多人在div1的CSS樣式中添加clear:right;然而這樣子是沒有用的。

對于CSS的清除浮動(clear)，一定要牢記：這個規(guī)則只能影響使用清除的元素本身，不能影響其他元素。

所以在div2中CSS樣式中添加clear:left;`

這時候才可以生效

云服務(wù)器 GPU云服務(wù)器浮動-前端-css Floats Floating float

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114476.html

相關(guān)文章

CSS Float nine rules

注：本文是對眾多博客的學(xué)習(xí)和總結(jié)，可能存在理解錯誤。請帶著懷疑的眼光，同時如果有錯誤希望能指出。如果你喜歡我的文章，可以關(guān)注我的私人博客:http://blog-qeesung.rhcloud.com/ 入門前端也算是有三個月之久了，發(fā)現(xiàn)Float這個屬性一直都很迷惑，只是知道一些簡單的浮動規(guī)則，并沒有深入去學(xué)習(xí)，一旦遇到一點(diǎn)復(fù)雜的浮動場景，自己也就懵了。于是在網(wǎng)上找了數(shù)篇關(guān)于浮動的博客文章，加...

bingo 2019-08-29 10:59 評論0 收藏0
CSS Float nine rules

注：本文是對眾多博客的學(xué)習(xí)和總結(jié)，可能存在理解錯誤。請帶著懷疑的眼光，同時如果有錯誤希望能指出。如果你喜歡我的文章，可以關(guān)注我的私人博客:http://blog-qeesung.rhcloud.com/ 入門前端也算是有三個月之久了，發(fā)現(xiàn)Float這個屬性一直都很迷惑，只是知道一些簡單的浮動規(guī)則，并沒有深入去學(xué)習(xí)，一旦遇到一點(diǎn)復(fù)雜的浮動場景，自己也就懵了。于是在網(wǎng)上找了數(shù)篇關(guān)于浮動的博客文章，加...

Nino 2019-08-01 15:28 評論0 收藏0
【前端Talkking】CSS系列——CSS深入理解之float浮動

摘要：包裹性所謂包裹性，其實(shí)是由包裹和自適應(yīng)兩部分組成。官方對屬性的解釋是元素盒子的邊不能和前面的浮動元素相鄰。清除高度塌陷的問題在上面的章節(jié)中，如果子元素設(shè)置浮動屬性，則父元素就會出現(xiàn)高度塌陷的問題。 float屬性是CSS中常用的一個屬性，在實(shí)際工作中使用的非常多，如果使用不當(dāng)就會出現(xiàn)意料之外的效果。雖然很多人說浮動會用就行、浮動過時了，但是對于優(yōu)秀的前端開發(fā)人員，需要有刨根問底的精神，...

yankeys 2019-08-29 15:10 評論0 收藏0
了解CSS浮動以及清理浮動（Float）

摘要：浮動浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框?yàn)橹?。由于浮動框不在文檔的普通流中，相當(dāng)于不占用空間，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣。 CSS浮動浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框?yàn)橹?。由于浮動框不在文檔的普通流中，相當(dāng)于不占用空間，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣。 CSS ...

TZLLOG 2019-08-28 18:08 評論0 收藏0
深入css布局 (2) — 定位與浮動

摘要：深入布局定位與浮動在知識體系中，除了選擇器，樣式屬性等基礎(chǔ)知識外，布局相關(guān)的知識才是比較核心和重要的點(diǎn)。定位后，原來在文檔流中占據(jù)的位置，會被其他元素所占據(jù)。清除浮動的特殊應(yīng)用清除浮動可以解決父元素高度塌陷問題。? 深入css布局(2) — 定位與浮動 ? ???? 在css知識體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識外，css布局相關(guān)的知識才是css比較核心和重要的點(diǎn)。今天我們來深...

Crazy_Coder 2019-04-23 13:42 評論0 收藏0
CSS基礎(chǔ)知識之float

摘要：前段時間寫過一篇基礎(chǔ)知識之，當(dāng)時對的理解不太準(zhǔn)確，被慕課網(wǎng)多名讀者指出原文已修正，如有誤導(dǎo)實(shí)在抱歉。浮動的基礎(chǔ)知識浮動有個屬性左浮動右浮動不浮動繼承。浮動元素脫離了標(biāo)準(zhǔn)文檔流，文字和行級元素會環(huán)繞該元素，塊級元素則不受影響。前段時間寫過一篇CSS基礎(chǔ)知識之position，當(dāng)時對float的理解不太準(zhǔn)確，被慕課網(wǎng)多名讀者指出（原文已修正，如有誤導(dǎo)實(shí)在抱歉）?，F(xiàn)對float進(jìn)行更深入的...

wuyangchun 2019-08-30 13:06 評論0 收藏0