浮动 ( float )

浮动元素 ( float ) 一直都是网页排版的主要技巧，这篇教学除了会介绍 float 属性的语法，也会深入探讨浮动元素和 inline 元素与 block 元素在排版的互动或换行情况，以及 clear 清除浮动的属性语法。

快速导览：

• float 撰写语法
• 认识“float 浮动”
  • 1、浮动元素离开原本平面，但内容占有空间
  • 2、浮动元素一率转换成“block 显示类型”
  • 3、多个浮动元素，按照先后顺序排列
• 浮动元素 vs inline 元素
• 浮动元素 vs block 元素
• 浮动的重叠
• clear 清除浮动

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

float 撰写语法

要将元素变成浮动元素，需要使用“float”属性，没有继承特性，属性值有下列几种：

下方范例分别将行内元素 oxxo 设为靠左浮动和靠右浮动。

线上展示：https://codepen.io/oxxo/pen/YzovjRZ

<!-- HTML 程式碼-->
沒有浮動元素
<div class="a">
  <span>apple</span><span class="f">oxxo</span><span>banana</span><span>orange</span>
</div>
浮動元素靠左浮動
<div class="b">
  <span>apple</span><span class="f">oxxo</span><span>banana</span><span>orange</span>
</div>
浮動元素靠右浮動
<div class="c">
  <span>apple</span><span class="f">oxxo</span><span>banana</span><span>orange</span>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 10px;
    margin: 10px;
  }
  span {border: 1px solid #aaa;}
  .f {color: red;}
  .b .f {float: left;}   /* 設定靠左浮動 */
  .c .f {float: right;}  /* 設定靠右浮動 */
</style>

认识“float 浮动”

虽然将元素设定为浮动元素很简单，但浮动元素在排版时却具有自己的一套排版规则，下方列出“浮动元素”基本的排版行为：

1、浮动元素离开原本平面，但内容占有空间

浮动元素会“离开原本所在的平面”，移动到“浮动元素所在的平面”，排版不会受到原本平面的排版规则限制，虽然移动到别的平面，但内容空间却有下列的特性：

• 浮动元素所占的“内容”空间会影响原本平面上内容，造成其他元素的“内容”发生位移。
• 浮动元素在没有设定尺寸的状态下，使用内容尺寸作为长宽尺寸。

以下图为例，如果画面中有 ABCD 四个行内元素 ( 显示类型为 inline )，当 C 元素设为浮动之后，C 元素会移动到浮动的平面，根据设定靠左或靠右浮动，C 元素的内容会占据原本平面上的内容空间，将其他元素的内容推挤到其他位置。

如果将上图转换为程序码，变成浮动元素的 span，就会移动到左方或是右方。

线上展示：https://codepen.io/oxxo/pen/WNqyKYg

<!-- HTML 程式碼-->
沒有浮動元素
<div class="a">
  <span>apple</span><span class="f">oxxo</span><span>banana</span><span>orange</span>
</div>
有浮動元素，靠左浮動
<div class="b">
  <span>apple</span><span class="f">oxxo</span><span>banana</span><span>orange</span>
</div>
有浮動元素，靠右浮動
<div class="c">
  <span>apple</span><span class="f">oxxo</span><span>banana</span><span>orange</span>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 10px;
    margin: 10px;
  }
  span {border: 1px solid #aaa; }
  .f {color: red;}
  .b .f {float: left;}   /* 設定靠左浮動 */
  .c .f {float: right;}   /* 設定靠左浮動 */
</style>

2、浮动元素一率转换成“block 显示类型”

浮动元素不论原本显示类型为何，一率转换成“block 显示类型”元素，且无法透过任何方式修改显示类型，下方范例会将 strong 元素改成浮动元素，原本 strong 元素是 inline 行内容器类型，无法修改宽度与高度，但变成浮动元素之后，就变成 block 区块容器类型，就可以调整宽度高度，就算使用 !important 也无法修改显示类型。

注意，浮动元素还具有“margin 不为负值”的特性 ( 只影响内容空间，不影响容器空间 )！

线上展示：https://codepen.io/oxxo/pen/bNEdqjL

<!-- HTML 程式碼-->
<span>apple</span>
<strong>banana</strong>
<span>coconut</span>

<!-- CSS 程式碼 -->
<style>
  * {font-size: 30px;}

  strong {
    width: 120px;
    height: 120px;
    border: 1px solid #000;
    float: left;
    display: inline!important; /* 加上 important 證明沒有辦法改成 inline */
  }
</style>

3、多个浮动元素，按照先后顺序排列

如果有两个以上的浮动元素，会按照元素在程序码中的先后顺序，并依循下方的规则进行排列：

• 浮动元素会根据设定向左或向右移动，直到“碰到父元素边缘或其他浮动元素”，移动范围限制在父元素的容器内容范围。

以下图为例，画面中 ABCD 四个行内元素，当 B 和 D 元素设为浮动之后，B 元素会先往左或往右移动到边缘，接着 D 元素再往左或往右直到碰到 B 元素为止。

如果将上图转换为程序码，变成浮动元素的两个 span，就会移动到左方或是右方。

线上展示：https://codepen.io/oxxo/pen/XWLYBor

<!-- HTML 程式碼-->
沒有浮動元素
<div class="a">
  <span>apple</span><span class="f">banana</span><span>oxxo</span><span class="f">orange</span>
</div>
有浮動元素，靠左浮動
<div class="b">
  <span>apple</span><span class="f">banana</span><span>oxxo</span><span class="f">orange</span>
</div>
有浮動元素，靠右浮動
<div class="c">
  <span>apple</span><span class="f">banana</span><span>oxxo</span><span class="f">orange</span>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 10px;
    margin: 10px;
  }
  span {border: 1px solid #aaa;}
  .f {color: red;}
  .b .f {float: left;}   /* 設定靠左浮動 */
  .c .f {float: right;}   /* 設定靠左浮動 */
</style>

浮动元素 vs inline 元素

如果浮动元素和显示类型为 inline 的元素进行互动，大部分排版的情形都满容易理解 ( 上述的范例都使用 inline 元素进行互动 )，但有时会发生“换行”的状况，这也是最困扰用户的地方，由于浮动元素和 inline 元素位置都是使用“内容”空间，会在下列情况发生推挤内容而换行的状况：

• 浮动元素前方 inline 元素的“容器空间”无法容纳浮动元素 ( 没有标签包覆的匿名元素也存在容器空间 )。
• 浮动元素设定了 border、padding 或 margin，会造成后方浮动元素换行。

下图呈现浮动元素和 inline 元素的互动状况，当浮动元素 B 前方的 A 元素空间还能容纳 B 时，B 就会按照浮动元素靠左的方式放在左侧，但如果浮动元素 C 超过 A 元素单行的空间，就会换行到第二行，而且如果有设定了边界或边框，就会发生推挤，跑到 B 右下方的位置。

下方使用程序码呈现浮动元素和 inline 元素互动后换行的情境，从中可以注意观察，当浮动元素设定了 border、padding 或 margin，会造成后方浮动元素换行。

线上展示：https://codepen.io/oxxo/pen/PoraBXE

<!-- HTML 程式碼-->
沒有浮動元素
<div class="a">
  <span>apple1 apple2 apple3</span> <span class="f">banana</span> <span class="f">oxxo</span> <span>orange</span>
</div>
浮動元素靠左浮動 ( 浮動元素有邊框 )
<div class="b">
  <span>apple1 apple2 apple3</span> <span class="f">banana</span> <span class="f">oxxo</span> <span>orange</span>
</div>
浮動元素靠左浮動 ( 浮動元素沒有邊框 )
<div class="c">
  <span>apple1</span> <span class="f">banana</span> <span class="f">oxxo</span> <span>orange</span>
</div>
浮動元素靠左浮動，第一行文字很長
<div class="d">
  <span>apple1 apple2 apple3 apple4</span> <span class="f">banana</span> <span class="f">oxxo</span> <span>orange</span>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 10px;
    margin: 10px;
    width: 230px;

  }
  span {border: 1px solid #aaa;}
  .f {
    float: left;   /* 全部靠左浮動 */
    color: red;
    border: 1px solid #f00;
  }
  .a .f {
    float: none;   /* 只有 .a 裡面不浮動 */
  }
  .c .f {
    border: none;
  }
</style>

浮动元素 vs block 元素

如果浮动元素和显示类型为 block 的元素放在一起，则会延伸出下列的规则：

• 浮动元素排列时最高的位置，不能高过“前方的”block 元素。
• 浮动元素会占据 block 元素的“内容”空间，但不会占据 block 元素的“盒子”空间，换句话说就是 block 元素的内容会被推挤造成位移或换行，但 block 元素的盒子位置不会被改变。

以下图为例，画面中 ABCD 四个 block 元素，当 C 元素设为浮动之后，最高的位置不会超过 B 元素，且不会影响 D 元素的盒子容器外观 ( 因为 C 元素完全离开平面 )，但因为 C 元素的内容空间会影响 D 元素的内容，造成 D 元素内容发生位移 ( D 元素的灰色盒子空间不变，但绿色的内容空间被推挤到旁边 )。

下方范例将 block 元素加上灰色边框，浮动元素加上红色边框，呈现的结果可以发现浮动元素不会影响 block 元素的盒子容器，但内容却会挤压 block 容器的内容文字，造成内容文字位移。

线上展示：https://codepen.io/oxxo/pen/vYqravm

<!-- HTML 程式碼-->
沒有浮動元素
<div class="a">
  <span>apple</span><span>banana</span><span class="f">oxxo</span><span>orange</span>
</div>
有浮動元素，靠左浮動
<div class="b">
  <span>apple</span><span>banana</span><span class="f">oxxo</span><span>orange</span>
</div>
有浮動元素，靠右浮動
<div class="c">
  <span>apple</span><span>banana</span><span class="f">oxxo</span><span>orange</span>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 3px;
    margin: 10px;
  }
  span {
    display: block;          /* 設定為 block 顯示類型 */
    border: 1px solid #aaa;  /* 設定灰色邊框凸顯盒子容器 */
    padding: 3px;
  }
  .f {
    color: red;
    border: 1px solid #f00; /* 設定紅色邊框凸顯浮動元素 */
    padding: 0;
  }
  .b .f {float: left;}   /* 設定靠左浮動 */
  .c .f {float: right;}   /* 設定靠左浮動 */
</style>

浮动元素和 block 元素互动时，“换行”往往是最困扰用户排版的问题，由于浮动元素和一般元素的位置使用的是“内容”空间，所以会在下列情况发生推挤内容而换行的状况：

• 浮动元素前方出现 block 元素造成强制换行。
• 浮动元素后方的 block 元素内容过长，后方内容会换行。
• 如果浮动元素设定了 border、padding 或 margin，会造成后方浮动元素换行。
• 浮动元素的容器空间具有“margin 不为负值”的特性 ( 只影响内容空间 )！

下图呈现浮动元素和 block 元素的互动状况，当浮动元素 C 后方的 D 元素空间能够同时容纳 C 和 D 的内容时，C 就会按照浮动元素靠左的方式放在左侧并将 D 的内容推挤到旁边，但如果 D 的空间不足时，D 的内容就会发生换行的现象，但 C 的内容仍然会占据 D 元素的容器空间。

下方使用程序码呈现浮动元素和 block 元素互动后换行的情境，可以看清楚地看浮动元素造成其他内容的换行，出并非是“容器”换行，而是容器里的“内容”发生换行。

线上展示：https://codepen.io/oxxo/pen/eYwjYQa

<!-- HTML 程式碼-->
沒有浮動元素
<div class="a">
  <span>apple</span> <span>banana</span> <span class="f">oxxo</span> <span>orange</span>
</div>
浮動元素靠左浮動，寬度自動
<div class="b">
  <span>apple1 apple2 apple</span> <span>banana</span> <span class="f">oxxo</span> <span>orange</span>
</div>
浮動元素靠左浮動，設定比較小的寬度
<div class="c">
  <span>apple</span> <span>banana</span> <span class="f">oxxo</span> <span>orange</span>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 3px;
    margin: 10px;
    width: 230px;
  }
  span {
    display: block;          /* 改成 block 顯示類型 */
    border: 1px solid #aaa;
    padding: 5px;            /* 加上 padding 區隔浮動元素 */
  }
  .c span {width: 100px;}    /* 設定比小的寬度 */
  .f {
    color: red;
    padding: 0;
    border: 1px solid #f00;
  }
  .b .f {float: left;}   /* 設定靠左浮動 */
  .c .f {float: left;}   /* 設定靠左浮動 */
</style>

此外，要记得如果多个浮动元素中穿插了 block 元素，前方是 block 元素的浮动元素仍然会发生“换行”的状况，下方的范例呈现多个浮动元素穿插在 block 元素之间的情形。

线上展示：https://codepen.io/oxxo/pen/ExBpxGx

<!-- HTML 程式碼-->
<div>
  <span>apple</span> <span class="f">banana</span> <span>milk</span> <span class="f">oxxo</span> <span>orange</span>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 3px;
    margin: 10px;
    width: 250px;
  }
  span {
    display: block;
    border: 1px solid #aaa;
    padding: 5px;
  }
  .f {
    float: left;    /* 靠左浮動 */
    color: red;
    padding: 0;
    border: 1px solid #f00;
  }
</style>

浮动的重叠

当一般的元素透过 float 变成浮动元素后，浮动元素彼此之间不重叠，和其他一般元素也不会重叠，和父元素的边界也不会重叠，但如果将其他元素的“maring 外边界”设为“负值”，则会因为外边界内缩造成重叠的效果 ( 参考“margin 设定负值”)。

浮动元素的容器空间具有“margin 不为负值”的特性 ( 只影响内容空间 )！

当浮动元素与 inline 元素重叠时，inline 元素的“边框、背景和内容”都会“在浮动元素的上层”，从下方范例可以看出，虽然浮动元素在 HTML 程序码中顺序在第一个元素之上，但因为是浮动元素与 inline 元素的重叠行为，导致第一个元素反而覆盖了浮动元素。

线上展示：https://codepen.io/oxxo/pen/JjQBoXR

<!-- HTML 程式碼-->
純 inline 元素
<div class="a">
  <span>apple</span> <span>banana</span> <span class="f">oxxo</span> <span>orange</span>
</div>
浮動元素 + inline 元素
<div class="b">
  <span>apple</span> <span>banana</span> <span class="f">oxxo</span> <span>orange</span>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #aaa;
    padding: 3px;
    margin: 10px;
    width: 280px;
  }
  span {
    border: 1px solid #000;
    padding: 10px;
    background: #ccc;
  }
  .f {
    margin: -10px;
    color: red;
    border: 1px solid #f00;
    background: #f003;
  }
  .b .f {float: left;}
</style>

当浮动元素与 block 元素重叠时，block 元素的“边框、背景”会在“浮动元素下层”，“内容”会在“浮动元素上层” ，从下方范例可以看出，虽然浮动元素在 HTML 程序码中顺序在第四个元素之下，但因为是浮动元素与 block 元素的重叠行为，导致浮动元素覆盖了第四个元素。

线上展示：https://codepen.io/oxxo/pen/vYqaEGe

<!-- HTML 程式碼-->
純 block 元素
<div class="a">
  <span>apple</span> <span>banana</span> <span class="f">oxxo</span> <span>orange</span>
</div>
浮動元素 +block 元素
<div class="b">
  <span>apple</span> <span>banana</span> <span class="f">oxxo</span> <span>orange</span>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #aaa;
    padding: 3px;
    margin: 10px;
    width: 280px;
  }
  span {
    display: block;
    border: 1px solid #000;
    padding: 10px;
    background: #ccc;
  }
  .f {
    margin: -10px;
    color: red;
    border: 1px solid #f00;
    background: #f003;
  }
  .b .f {float: left;}
</style>

下方的范例展示“浮动元素容器空间不支援 margin 负值”的效果，可以看到虽然浮动元素的 margin 也是负值，但只影响了内容空间，容器空间却没有被影响，而且因为内容空间背影响，可以很清楚的看到前后的 div 的内容遮住了浮动元素的内容，但背景与边框却被浮动元素所遮住。

线上展示：https://codepen.io/oxxo/pen/YPwXxvW

<!-- HTML 程式碼-->
<div>apple</div>
<div class="a">banana</div>
<div>coconut</div>

<!-- CSS 程式碼 -->
<style>
  body {
    padding-top: 50px;
  }
  * {
    font-size: 60px;
    font-family: impact;
  }
  div {
    width: 300px;
    border: 1px solid #000;
    background: #999;
  }
  .a {
    margin: -30px 0;  /* 浮動元素的 margin 負值只影響內容，並不影響容器 */
    line-height: 1;
    width: max-content;
    float: left;
    background: #f00;
    color: white;
  }
</style>

clear 清除浮动

当元素变成浮动元素后，元素的“内容空间”会直接影响前后元素的排版，内容空间对于 inline 行内元素而言影响比较小 ( 原本大多都是用内容排版 )，但如果是对于 block 区块元素而言，有时会造成版面的混乱 ( 内容和容器空间分不清楚 )，如果希望 block 区块类型的元素不要被浮动元素被影响，可以使用“clear”清除浮动的样式属性，将 block 元素宣告不受浮动元素影响，清除浮动的属性值如下：

注意，clear 只针对 block 显示类型元素有作用，且没有继承特性。

下方范例有三个区块，第一个区块呈现完全不清除浮动的情形 ( banana 和 oxxo 会根据浮动规则摆放 )，第二个区块设定 clear:right，因此会清除浮动向右的浮动元素影响，milk 元素就不会受到 banana 元素影响，但由于 oxxo 元素是浮动向左，仍然会影响到 orange 的内容，第三个区块因为是 clear:both，会同时清除向左向右浮动，因此区块的内容就都不会被浮动影响。

线上展示：https://codepen.io/oxxo/pen/rNEJbpp

<!-- HTML 程式碼-->
<div class="a">
  <div>apple</div> <div class="fr">banana</div> <div>milk</div> <div class="fl">oxxo</div> <div>orange</div>
</div>
<div class="b">
  <div>apple</div> <div class="fr">banana</div> <div class="cc">milk ( clear: right )</div> <div class="fl">oxxo</div> <div class="cc">orange ( clear: right )</div>
</div>
<div class="c">
  <div>apple</div> <div class="fr">banana</div> <div class="cc">milk ( clear: both )</div> <div class="fl">oxxo</div> <div class="cc">orange ( clear: both )</div>
</div>

<!-- CSS 程式碼 -->
<style>
  .a, .b, .c {
    border: 1px solid #000;
    padding: 3px;
    margin: 10px;
  }
  div div {
    border: 1px solid #aaa;
    margin: 5px;
  }
  .fr, .fl {
    color: red;
    padding: 0;
    border: 1px solid #f00;
  }
  .fr {float: right;}  /* 向右浮動 */
  .fl {float: left;}   /* 向左浮動 */
  .b .cc {clear: right;} /* 清除向右浮動 */
  .c .cc {clear: both;}  /* 清除向左浮動 */
</style>

小结

float 浮动是网页排版里的重要技巧，但也是相当容易搞错用法的样式属性，使用时只要记住浮动元素影响的是“内容”而不是“容器”，就可以得心颖手的去应用浮动元素啰。

意见反馈