Float

float EX1 - 沒有float

.container 父元素內文
 span.float 子元素內文
 | 父元素內文
 span.float 子元素內文
 | 父元素內文

*
 margin: 0 10px
.container
  background-color: Orange
  
  .float
    background-color: YellowGreen
    padding: 10px

Pug

float EX2 - 設float

.container
  background-color: Orange  
  
  .float
    background-color: YellowGreen
    padding: 10px
    float: left

Pug

float EX3 - 設float + overflow: hidden

當子元素比父元素高時
- 有float時，父元素如果overflow設為hidden ⇒ 則父元素會自動撐開
沒有float時，則不會自動撐開

*
 margin: 0 10px
.container
  background-color: Orange
  overflow: hidden
  
  .float
    background-color: YellowGreen
    padding: 10px
    float: left

Pug

See the Pen CSS - float EX by yehyoung (@yehyeh) on CodePen.

Last updated on 2020-04-12
Published on 2020-04-12
Edit on GitHub