3-7 float : 麻將式 網頁排版

何謂 float ( 浮動) 網頁排版

元素基本原則從 上 至 下 網頁排版，當元素想向兩側併排時，就像 玩麻將 時將牌向兩側並排一樣。

float(浮動)造成的問題

問題：

範例：HTML結構 及 CSS美化

  html 結構：

    <div class="divAll">父元素
      <div class="div1">子元素1</div>
      <div class="div2">子元素2</div>
    </div>

  CSS 美化：   <!-- 以下CSS美化，簡化不重要屬性值 -->
    <style>
      .divAll { background: #fdf4c0; }
      .div1 { background: #b9f392; }
      .div2 { background: #f5c4fc; }

      .div1, .div2{
        width: 100px; height: 100px;
        float: left;
      }
    </style>

說明：因父元素的大小依子元素容量而撐開，當子元素設定 float 時，就好像飄浮在空中，導致父元素沒有子元素內容而空間會消失

解決方法1：clear : both ;

在浮動子元素之下，新增一個沒有內容的 div，其CSS樣式設定為 clear : both ; 設定停止浮動，進而讓父元素找到所有子元素空間

  html 結構：

    <div class="divAll">父元素
      <div class="div1">子元素1</div>
      <div class="div2">子元素2</div>
      <div class="clear"></div>
    </div>

  CSS 美化：   <!-- 以下CSS美化，簡化不重要屬性值 -->
    <style>
      .clear { clear: both; }    <!-- 新增 -->
    </style>

解決方法2:overflow:hidden

與解決方法1不同，不用增加子元素，直接在 父元素 新增 overflow: hidden; ，進而讓父元素找到所有子元素空間

  html 結構：   <!-- 與解決方法1不同，不用增加子元素 -->

    <div class="divAll">父元素
      <div class="div1">子元素1</div>
      <div class="div2">子元素2</div>
    </div>

  CSS 美化：   <!-- 以下CSS美化，簡化不重要屬性值 -->
    <style>
      .divAll {
        background: #fdf4c0;
        overflow: hidden;      <!-- 新增 -->
      }
    </style>

float 浮動類屬性

屬性	說明	CSS3	連結
float	定義框架的浮動排版		英 ／ 中
clear	定義結束以上元素的浮動排版		英 ／ 中
overflow	(1) 設定框架內容超出框架的部份該如何表現，有 visible、hidden、scroll、auto… (2) 如果框架沒有設定固定高度，並且內容的子元素為浮動排版，那麼框架的高度會包含所有子元素		英 ／ 中
overflow-x	設定框架內容水平範圍超出框架的部份該如何表現	V	英 ／ 中
overflow-y	設定框架內容垂直範圍超出框架的部份該如何表現	V	英 ／ 中

float 屬性值

定義框架的浮動排版

屬性值	說明
left	元素向左側浮動
right	元素向右側浮動
none	元素不浮動 預設值
inherit	規定應該從父元素繼承 float 屬性的值

clear 屬性值

clear 屬性是用來解除 float 屬性的作用

屬性值	說明
left	在左側不允許浮動元素
right	在右側不允許浮動元素
both	在左右兩側均不允許浮動元素
none	允許浮動元素出現在兩側 預設值
inherit	規定應該從父元素繼承 clear 屬性的值