CSS浮動float

chenatu 發布于2019-08-29 18:39 / 2571人閱讀

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

參考教程（經驗分享：CSS浮動(float,clear)通俗講解）

首先了解一下標準文檔流的排版：從上到下，從左到右，遇塊換行

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

block元素無視float元素

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

下圖就是這種情況。

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

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

行內元素會圍繞著浮動的元素進行排列

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

? 語法：

? clear : none | left | right | both

? 取值：

? none : 默認值。允許兩邊都可以有浮動對象

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

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

? both : 不允許有浮動對象

例子：

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

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

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

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

這時候才可以生效

云服務器 GPU云服務器浮動-前端-css Floats Floating float

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114476.html

CSS Float nine rules

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

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

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

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

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

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

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

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

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

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

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

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