技術標籤：WEBcsshtml

浮動和嵌入形狀 Floating and Shapes

• • 1. 浮動Floating
  • • 1.1 控制浮動元素擺放的規則
    • 1.2 應用行為Applied Behavior
    • 1.3 清除Clearing
  • 2. 嵌入形狀Shapes
  • • 2.1 shape-outside屬性
    • • 2.1.1 shape-box的型別
      • 2.1.2 basic-shape的型別
      • 2.1.3 語法
    • 2.2 shape-margin

1. 浮動Floating

float屬性允許浮動任何元素，如：影象、段落、列表。

p {float: right; width: 15em; margin: 0 1em 1em; padding: 0.25em; border: 1px solid;}
img {float: left; width: 160px; margin: 25px;}

1.1 控制浮動元素擺放的規則

1. 浮動元素的左(或右)外邊界不能超出其包含塊的左(或右)內邊界。
2. 防止元素彼此覆蓋，浮動元素的左(或右)外邊界必須是源文件中之前出現的左浮動(右浮動)元素的右(或左)外邊界，除非後出現浮動元素的頂端在先出現浮動元素的底端下面。
3. 左浮動元素的右外邊界不會在其右邊右浮動元素的左外邊界的右邊。右浮動元素的左外邊界不會在其左邊左浮動元素的右外邊界的左邊。這條規則避免浮動的元素重疊。假如網頁正文的寬度是500畫素，內容裡有兩個影象，都是300畫素寬。第一個影象向左浮動，第二個影象向右浮動。根據這條規則，第二個影象不會與第一個影象出現100畫素寬的重疊區域。事實上，第二個影象的頂邊將正好在左浮動影象的底邊以下。
4. 一個浮動元素的頂端不能比其父元素的內頂端更高。
5. 浮動元素的頂端不能比之前所有浮動元素或塊級元素的頂端更高。
6. 如果源文件中一個浮動元素之前出現另一個元素，浮動元素的頂端不能比包含該元素所生成框的任何行框的頂端更高。
7. 浮動元素不能超出其包含元素的邊界。左(或右)浮動元素的左(或右)邊有另一個浮動元素，前者的右外邊界不能在其包含塊的右(或左)邊界的右(或左)邊。如果沒有足夠的空間，浮動元素會被擠到一個新的“行上”
8. 浮動元素必須儘可能高地放置。即滿足其他約束條件的前提下，浮動得儘可能高。
9. 左浮動元素必須向左儘可能遠，右浮動元素則必須向右儘可能遠。

1.2 應用行為Applied Behavior

1. 浮動規則只處理了浮動元素和其父元素的左、右和上邊界；沒有涉及下邊界。

2. 浮動元素會延伸從而包含其所有後代浮動元素。

3. 負外邊距可能導致浮動元素移到其父元素的外面。當浮動元素比其父元素更寬，浮動元素會超出其父元素的左右內邊界，從而儘可能正確的顯示。

4. 對於行內元素：

   - 行內框與一個浮動元素重疊時，其邊框、背景和內容都在該浮動元素之上顯示。
   - 塊框與一個浮動元素重疊時，其邊框和背景在該浮動元素之下顯示，而內容在浮動元素之上顯示。
   

1.3 清除Clearing

clear 屬性規定元素的哪一側不允許存在浮動元素。

clear: both;

注：大多數情況下，無法知道一個元素周圍多大範圍內不允許有浮動元素，要確保一個設定clear屬性的元素的頂端與一個浮動元素的底端之間有一定空間。可以為浮動元素本身設定一個下外邊距。如：

img {
    float: left;  margin: 0 0;
}

2. 嵌入形狀Shapes

2.1 shape-outside屬性

shape-outside 屬性指定使用下面列表的值來定義浮動元素的浮動區域。這個浮動區域決定了行內內容（浮動元素）所包裹的形狀。

2.1.1 shape-box的型別

• margin-box
  定義一個由外邊距的外邊緣封閉形成的形狀。這個形狀的角的半徑由相應的border-radius 和margin 的值決定。如果 border-radius / margin 的比率大於等於 1 , 那麼這個 margin box 的角的弧度就是 border-radius + margin ；如果比率小於 1，那麼這個 margin box 的角的弧度就是 border-radius + (margin * (1 + (ratio-1)^3)) 。

• border-box
  定義一個由邊界的外邊緣封閉形成的形狀。 這個形狀遵循正常的邊界外部圓角的形成規則。

• padding-box
  定義一個由內邊距的外邊緣封閉形成的形狀。這個形狀遵循正常的邊界內部圓角的形成規則。

• content-box
  定義一個由內容區域的外邊緣封閉形成的形狀（即：被padding包裹的區域，在chrome控制檯中的盒子模型圖中的藍色區域。）。每一個角的弧度取 0 或 border-radius - border-width - padding 中的較大值。

2.1.2 basic-shape的型別

• inset() ：定義一個矩形範圍。

  inset( <shape-arg>{1,4} [round <border-radius>]? )
  

  四個引數遵循以下原則：

  1. top right bottom left`。這些值圍著元素從上(top)順時針旋轉，如果想呈現你想要的效果，就必須正確安排值的順序。

  2. 值複製：當其中一個值預設的時候，將會按照以下規則：如果為外邊距指定3個值，則第4個值將會從第2個複製得到。如果給定兩個值，第4個值會從第2個值複製得到，第3個值會從第1個值得到。

• circle()：定義一個圓形範圍。

  百分數的值等於sqrt(width^2+height^2)/sqrt(2).

  circle( [<shape-radius>]? [at <position>]? )
  

• ellipse()： 定義一個橢圓範圍。

  ellipse( [<shape-radius>{2}]? [at <position>]? )
  

• polygon()：定義一個多邊形範圍。

  path( [<fill-rule>,]? <string>)
  

2.1.3 語法

/* 關鍵字值 */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

/* 函式值 */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

/* <url> 值 */
shape-outside: url(image.png);

/* 漸變值 */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

/* 全域性值 */
shape-outside: initial;
shape-outside: inherit;
shape-outside: unset;

舉例：

img.plane {
    float: left;
    shape-outside: url(images/paperplane.png);
    height: 160px;
}

<img class="plane" src="images/paperplane.png" alt="papaer plane">

參考：Shape-outside

2.2 shape-margin

shape-margin 用於設定由shape-outside建立的CSS形狀的外邊距。

shape-margin: 0;
shape-margin: 20px;
shape-margin: 1em;
shape-margin: 5%;