CSS float浮動、inline&block、box-sizing

介紹Float、inline&block、box-sizing

Float

CSS float 用來定義區塊的浮動，可以設定為靠左浮動或靠右浮動，常見用法像是文字繞圖片的特效或是 DIV 區塊排版上使用。
參考自:CSS float 浮動元素

設定文繞圖

設定float，前後畫面示範如下:
設定前:

設定後:

原因在於，以文字來說明我們可理解為3D視角上下層-下層A層、上層B層的概念，而此時區塊(可為div、p 等等)為下層A層，包裹的假文內容為上層B層，而另外設定的圖片(不受區塊包裹)為下層A層，再設定圖片float後，圖片相當於浮起來一層(概念像是由下層A層上浮至上層B層)，因此與同在B層的假文文字同層，所以畫面顯現如上文字在圖片旁邊。

設定圖片橫排

原始碼如下:

<body>
    <style>
        .box {
            width: 600px;
            margin: auto;
        }

        .column {
            width: 174px;
            height: 120px;
            padding: 10px;
            border: 3px solid rgb(243, 164, 164);
            background-color: rgb(58, 169, 212);
            float: left;
            font-size: 100px;
            color: cornsilk;
            text-align: center;
        }
    </style>
    <div class="box"></div>
        <div class="column">
            A
        </div>
        <div class="column">
            B
        </div>
        <div class="column">
            C
        </div>
</body>

設定float:left前:

設定後:

快速理解法:float浮動，原css排版是依照布局流(Normal flow)排列，像向下的水流一般，而設定flaot，就像在水裡浮了起來，所以以排頭(圖中的A cloumn)為首依序浮起。

參考資料:Normal flow、float、定位(Position)、z-index

float浮動產生的影響

原始碼如下:

<style>
       *{
           margin: 0;
           padding: 0;
       }

       .container {
           width: 960px;
           background-color: blanchedalmond;
           margin: auto;
       }

       .col {
           width: 300px;
           height: 150px;
           background-color: #ccc;
           /* float: left; */
       }
   </style>
   
   <div class="container">
       <div class="col"></div>
       <div class="col"></div>
       <div class="col"></div>
   </div>

設定float前:

設定float後:

原包裹圖層或文字的div(所稱父層，圖中鵝黃色的部分)，在圖層或文字div(子層)設定float之後，因父層原本是受子層內容而撐開，但因設定float浮動起來之後，父層感應不到子層，因此會縮為0(即畫面上看不見)

clear的效果

clear為散開浮動物件的意思，我們會在float圖層或文字後在設定一個div，通常取名clearfix或其他名字皆可，因此設定clear後，clearfix這個div即散開到float圖層或文字之下，而剛剛感應不到的背景父層div感應到此子層散開後，會隨之拉開，畫面上極似被float子層撐開(實則不是，是因clearfix這個子層)，如以下列範例圖為例，clearfix此div若有height，就類似下圖中的螢光黃色塊，clearfix的div受clear散開float，而父層受散開後的clearfix的子div而跟著散開(父層依然包裹著clearfix子層)
範例圖:

clear用法:

參考自:CSS clear 属性
 欸！不要這麼浮動好不好

block & inline & inline-block

每一個html標籤元素都會有一個預設的display屬性，標籤基本上大部分可分為兩種顯示模式，**一種是行內元素(inline)，另一種為區塊元素(block)**，我們可以在CSS內加入display來賦予新的屬性，以改變其原本特性，利用它來呈現我們想要的排版。(引用自:CSS教學-關於display:inline、block、inline-block的差別 )

基礎語法:

1
2
3

display: block;
display: inline;
display: inline-block;

什麼是block

block為區塊元素，常見的區塊元素標籤為:

div、ul li、p、h1
block理解為面積，可以設定寬與高，會占滿一整行

什麼是inline

inline為行內元素，常見的行內元素標籤為:

span、a、imput、img
inline可以理解為線，無法設定寬與高，內容的寬高尤其內容撐開，元素在同一行內呈現。

block&inline示意圖

<body>
    <style>
       .container {
            background-color: rgb(250, 243, 145);

       }

       #span1 {
           background-color: #eee;
       }
       #span2 {
           background-color: rgb(100, 82, 82);
       }
    </style>
    <div class="container">
        abc
    </div>
    <div class="container">
        abc
    </div>
    <div class="container">
        abc
    </div>
    <span id="span1">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi voluptate voluptas est ex et quidem excepturi labore fugiat autem, tenetur quaerat libero cupiditate nam cumque accusantium, ratione facere? Modi, sint?
    </span>
    <span id="span2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi voluptate voluptas est ex et quidem excepturi labore fugiat autem, tenetur quaerat libero cupiditate nam cumque accusantium, ratione facere? Modi, sint?
    </span>
    
</body>

呈現如下:

可以看出設定div的三個內文abc，直接占滿一行，而span標籤的兩個假文(以不同顏色區分)，可以看出是接續，在同一行呈現。

inline-block行內區塊

inline的方式呈現，但同時擁有block的屬性
可設定元素的寬高/margin/padding
可水平與其他元素排列
經常用於導覽列

好用的盒模型:box-sizing

box-sizing: content-box

內容物文字的長度符合寬度值。
假設設定300px:

box-sizing: border-box

方塊長度符合寬度值，此設定為讓畫面長度符合width設定之長，不必再因margin、padding而去扣除原始width長度。
假設width=300px,設定box-sizing:border-box之後，即顯示寬度300。

說明範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap{
            width: 960px;
            /*只有左右有作用，
             * 設定auto表示讓此區塊置中，左右都auto的意思*/
            margin: auto;
            background-color: #ffa;
        }
        /*3.設定clear: both，可參考上方clear設定*/
        .clearfix{
            width: 100%;
            clear: both;
        }
        .item{
            width: 300px;
            margin: 10px;
            padding: 10px;
            /*此次要點*/
    /* 4.設定box-sizing自動調節寬度，
 * 讓padding&margin不會讓畫面爆掉超過300， */
            box-sizing: border-box;
            border: 3px double #aaa;
            background-color: #fff;
            /*此次第二要點*/
            /*1.先設定float*/
            float: left;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus ullam alias numquam facilis provident consequatur dolores cumque voluptatem. Aspernatur, fugiat error. Minima nulla dolore autem, nostrum corporis voluptatum praesentium ex.</div>
        <div class="item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus ullam alias numquam facilis provident consequatur dolores cumque voluptatem. Aspernatur, fugiat error. Minima nulla dolore autem, nostrum corporis voluptatum praesentium ex.</div>
        <div class="item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus ullam alias numquam facilis provident consequatur dolores cumque voluptatem. Aspernatur, fugiat error. Minima nulla dolore autem, nostrum corporis voluptatum praesentium ex.</div>
        <!-- 2.ㄧ般來說先設定clearfix(或任何名稱的div) -->
        <div class="clearfix"></div>

    </div>
</body>
</html>

成品:

實戰應用

經過上方box-sizing介紹，我們可以將其應用在實際開發上，那撰寫程式的方式就可以是我們在開頭先下:

*, *:after, *:before {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;  
}

意思為，該頁下所有元素皆採用 box-sizing: border-box;，如此後面在切版就不必擔心x軸爆掉或者其他問題了。

參考自:
金魚都能懂網頁設計入門 : 換個新盒子 - 鐵人賽第十一天 | 網頁教學 | CSS教學

補充:假圖網址

https://fakeimg.pl/