国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS浮動其實很簡單

Jiavan / 2515人閱讀

摘要：實驗最基本測驗浮動實驗對應結果實驗結果分析因為為塊標簽，而且處于同一文檔流當中，固會向下排列。實驗左浮動，右浮動，左浮動浮動實驗結果實驗結果分析左浮動，所以失去塊級作用，并且脫離標準文檔流，因此在第一行最左邊。

其實CSS浮動原理就三句話，不像網上的某些文章說的天花亂墜！

浮動必會脫離文檔流


浮動會失去塊級作用


浮動只在自己所在位置那行向左或者向右浮動

請仔細理解上面這三句話，下面我們來驗證。

實驗1. 最基本測驗： 



    css浮動
實驗1對應結果：

實驗1結果分析：

因為div為塊標簽，而且處于同一文檔流當中，固會向下排列。

實驗2 我讓div1、div2、div3全部浮動 



    css浮動
實驗2對應結果：

實驗2結果分析：

因為div1、div2、div3都添加了浮動屬性，所以會失去塊級作用，所以他們會排列在第一行，并且是在標準文檔流之上。因為浮動只能在自己所在位置那行向左或者向右浮動，又因為浮動都在標準文檔流之上，所以會依次排列。

實驗3 我讓div1浮動，div2不浮動，div3浮動 



    css浮動
實驗3結果：

實驗3結果分析：

div1浮動，所以div1失去塊級作用，并且脫離標準文檔流，因此div1在第一行。
div2不浮動，因為div1浮動了，脫離了標準文檔流，所以div2會在第一行的位置，并且在div1的下面。
div3浮動，因為div2不浮動，仍然是塊級作用域，所以div3不可能跑到第一行去了，只能在第二行位置，因為浮動只能在自己所在行的位置向左或向右浮動，所以div3在第二行，并且脫離文檔流。

實驗4 div1左浮動，div2右浮動，div3左浮動 



    css浮動
實驗4結果：

實驗4結果分析：

div1左浮動，所以div1失去塊級作用，并且脫離標準文檔流，因此div1在第一行最左邊。
div2右浮動，所以div2失去塊級作用，并且脫離標準文檔流，又因為div1失去了塊級作用，所以div2在第一行最右邊。
div3左浮動，所以div3失去塊級作用，并且脫離標準文檔流，因為div1、div2都浮動了，所以div3會占到第一行的位置的下面，因為div3也具有浮動，而且左浮動，所以會在div1的右邊位置。

清除浮動

清除浮動包括清除左浮動、清除右浮動、清除左右浮動
clear: left 讓該標簽的左邊不能有其他標簽，如果有，則他會跑到下一行
clear: right 讓該標簽的右邊不能有其他標簽，如果有，則他會跑到下一行
clear: both 讓該標簽的左右均不能有其他標簽，如果有，則他會跑到下一行

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

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

相關文章

  • css魔幻屬性跟進篇

    摘要：中是這樣定義的屬性指定一個元素應沿其容器的左側或右側放置，允許文本和內聯元素環繞它。其同樣適用于設置屬性為絕對定位或固定定位的內聯元素。至于為什么，可以理解為內聯元素沒有盒模型，其高度由內容決定。 白話：即上一篇我腦中飄來飄去的css魔幻屬性自己的文章推出之后，這是自己寫的第四篇CSS相關的文章，文章絕大部分是自己工作總結得來，另一部分是平日sf回答的與面試中向面試官交流學到的，都是一...

    oogh 評論0 收藏0

  • CSS布局說——可能是最全的

    摘要：元素框相對于之前正常文檔流中的位置發生偏移，并且原先的位置仍然被占據。這些相對于布局來說是基礎的，同時也是非常重要的。可以看到，浮動元素，其實對于布局來說，是特別危險的。 前言 現在，我們被稱為前端工程師。然而，早年給我們的稱呼卻是頁面仔。或許是職責越來越大，整體的前端井噴式的發展，使我們只關注了js，而疏遠了css和html。 其實，我們可能經常在聊組件化，咋地咋地。但是，回過頭來思...

    hearaway 評論0 收藏0

  • 我腦中飄來飄去的css魔幻屬性

    摘要：先來一張圖，看懂的幾個屬性順便帶上圖片出處，文章講得還可以，理解這張圖片，后面就好理解了。元素根據標簽的屬性決定顯示輸入框還是按鈕。還有，還有近來很火的。 最近看到一篇20 個CSS高級技巧匯總的匯總，感觸很深，不過我想，與技巧相比，有些常見css布局難題，有時候更加讓我們的日常開發變得躊躇沮喪吧。在寫這一篇文章之前，自己還寫過一篇：我所不注意的那些CSS冷知識，但卻阻止了我做項目的速...

    JouyPub 評論0 收藏0

  • CSS魔法堂：說說Float那個被埋沒的志向

    摘要：時其寬度始終保持占滿寬度的態度。清除浮動就是為浮動影響的范圍劃邊界。那么可歸結為的父容器包裹所有子元素。注意屬性值不能為空白，否則無法清除浮動。 前言 ?定位系統中第一難理解就是Normal flow，而第二就非Float莫屬了，而Float難理解的原因有倆，1. 一開頭我們就用錯了；2. 它跟Normal flow靠得太近了。本文嘗試理清Float的特性和行為特征，若有紕漏望各位指正...

    legendmohe 評論0 收藏0

  • margin合并、塌陷，清除浮動

    摘要：合并的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。那我們怎么辦，回到主題清除浮動。你可能忘了偽元素是行內元素，只有塊元素才能清除浮動。所以我們最好后，主動清除一下浮動，避免以后遇到很奇怪的問題。 這是我的第一篇掘金文章，希望大家不要嫌棄。我還是一名在校大學生，就是想把自己所學到的知識寫出來，加深自己的印象，記錄自己成長的過程，這篇文章主要是介紹HTML 、 CSS 的一些小知...

    Alliot 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<