關於css浮動佈局的小知識

時間 2019-11-16

標籤關於 css 浮動佈局知識欄目 CSS 简体版

原文原文鏈接

之因此會寫浮動佈局基礎的知識，是由於有個剛學佈局的學生問我了我一個挺有意思的問題，纔想到記錄一下css

先過一下浮動的概念:浮動元素會脫離文檔流並向左/向右浮動，直到碰到父元素或者另外一個浮動元素。html

再來看看例子一:佈局

<!--樣式部分-->
 <style type="text/css"> .div1 { float: left; width: 400px; height: 400px; background-color: antiquewhite; } .div2 { display: block; width: 600px; height: 500px; background-color: red; } </style>
    <!--HTML部分-->
    <body>
    <div class="div1">
      兄弟元素1
    </div>
    <div class="div2">
      兄弟元素2
    </div>
  </body>
複製代碼

效果以下： spa

沒錯這是正常的浮動效果，並無什麼新奇的，先不着急，咱們再看看下面的例子二:

<!--樣式部分-->
 <style type="text/css"> .div1 { float: left; width: 400px; height: 400px; background-color: antiquewhite; } .span2 { display: inline-block; width: 600px; height: 500px; background-color: red; } </style>
    <!--HTML部分-->
    <body>
    <div class="div1">
      兄弟元素1
    </div>
    <span class="span2">
      兄弟元素2
    </>
  </body>
複製代碼

效果圖以下:code

那麼問題來了，學生問個人問題是爲何是span元素的時候，div1和span2爲何不會重合，起初我聽到這個問題愣了一下，但個人猜想是應該是文本元素做怪，再去看了一下有關浮動(float)的由來，就明白了cdn

浮動的由來

早些時候，W3C規定出來的浮動實際並非爲了佈局所用，當時是爲了作文字環繞才使用了浮動，只是後來人發現用它作佈局也挺不錯的，故至此float就擔任了CSS中佈局的任務，但咱們仍是不要忘了，float起初就是爲了作文字環繞的。這個說明就很好解釋爲何是span元素就不會重合的緣由了htm

加入你把span變成block元素再試一下：blog

<style> .span2 { display: block; width: 600px; height: 500px; background-color: red; } </style>
複製代碼

效果跟例子一的效果圖同樣都會重合文檔

總結

float能夠理解是一種特殊的「浮動」，元素雖然脫離的文檔流，但依然會影響到其餘元素的內部佈局。float有兩個功能：string

脫離文檔流
文字環繞

1. css 浮動佈局，清除浮動
2. CSS佈局 0x3 浮動佈局
3. CSS——浮動佈局與定位佈局
4. CSS浮動佈局-float
5. CSS浮動佈局案例
6. CSS浮動佈局詳解
7. CSS佈局及浮動
8. 浮動佈局知多少
9. CSS之浮動佈局（float，浮動原理，清除/閉合浮動方法） css之浮動佈局
10. 關於css佈局
更多相關文章...
• ionic 浮動框 - ionic 教程
• 與傳輸層有關的基本知識 - TCP/IP教程
• ☆基於Java Instrument的Agent實現
• NewSQL-TiDB相關

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。