iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 16
1
自我挑戰組

網頁學習雜記系列 第 16

Day 16 | 欸!不要這麼浮動好不好

今天想要來整理一下清除浮動 float 的方式,
只要有使用到 float,腦袋一定要自動聯想到清除浮動,
他們兩個就是這麼密不可分~

1. clearfix

在浮動物件的下方加上一個 class 名為 clearfixdiv,並且設定他 clear: both(絕對不是只要命名對就可以清除浮動,記得要設定 css 啊)

HTML

<div class="wrap">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="clearfix"></div>
</div>

CSS

.wrap{
  padding: 20px;
  background-color: #aaa;
}

.box {
  width: 200px;
  height: 200px;
  background-color: teal;
  float: left;
}

.clearfix{
  width: 0;
  height: 0;
  clear: both;
}

2. 父層::after

不想要在 HTML 結構上加上空的 div 的話,::after 會是一個很不錯的用法

HTML

<div class="wrap">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS

.wrap{
  padding: 20px;
  background-color: #aaa;
}

.wrap::after{
  content:'';
  display: block;
  height: 0;
  clear: both;
}

.box {
  width: 200px;
  height: 200px;
  background-color: teal;
  float: left;
}

3. 神奇的 overflow: hidden

這個我自己覺得滿玄的,在父層容器上設定 overflow: hidden
為了要去抓出這父層佔了多少空間,浮動物件的空間就會被計算進去。

HTML 長得跟上一個一模一樣,我就不再放了,
CSS

.wrap{
  padding: 20px;
  background-color: #aaa;
  overflow: hidden;
}

.box {
  width: 200px;
  height: 200px;
  background-color: teal;
  float: left;
}

這幾種都可以學起來,
以後看到別人做這樣設定的時候,
就不會滿頭問號想說幹嘛要這樣設定。

今天就講到這裡啦~
我們明天見。


上一篇
Day 15 | inline 與 block 的愛恨情仇
下一篇
Day 17 | 就是不保持安全社交距離 - inline-block 空白
系列文
網頁學習雜記30

尚未有邦友留言

立即登入留言