CSS 版面配置

在以前我們經常是使用 float 屬性去做到版面排版的需求。

float 屬性

  img {
    float: right;
  }

JS Bin

clear 屬性

若想要更進一步操作 float 了解 clear 屬性是必須的。

<style>
  div {
    border: 2px solid #FDC72F;
    float: left;
    width: 100px;
    height: 70px;
    margin: 1em;
  }
  p {
    border: 2px solid #6AC5AC;
  }
</style>
<div>
  就像是浮動在左側一樣
</div>
<p>雖然這元素是擺在 div 之後，但因為 div 浮動在左側的關係，所以瀏覽器自動將這元素漂浮在 div 旁邊</p>

JS Bin

清除浮動

    clear: left;

JS Bin

Reference: CSS clearfix 的密技

display: inline-block

雖然可以用 float 來做流動式的自動排版，但是你現在有新的選擇 display: inline_block。

  .sample {
    border: 3px solid #333;
    display: inline-block;
    width: 150px;
    margin: 1em;
    padding: 1em;
    box-sizing: border-box;
  }

JS Bin