css元素浮動所需注意的幾點是什麼

注意點：1、浮動元素的左外邊界不能超出其包含塊的左內邊界，右外邊界亦然；2、一個浮動元素的頂端不能比其父元素的內頂端更高；3.浮動元素的頂端不能比之前浮動元素或塊級元素的頂端更高；4、左浮動元素必須向左盡可能遠，右浮動元素須向右盡可能遠等。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css中的浮動：

在css中為了讓元素移動到父元素的左邊或右邊，我們可以設定元素浮動float.

float:left/right

浮動的選擇有兩種，一種是float:left左浮動。還有一種是float:right右浮動

如果對一個元素設定了浮動，那麼這個元素就會脫離標準文檔流，並且該元素後面的元素會佔據該元素原本的位置，並且元素後面的內容會被擠出。

加了浮動的元素是沒有寬和高的，並且該元素的父元素的高度也會顯示即高度塌陷，加了浮動的元素的寬和高是根據元素內部的內容動態需變化的。若要對其父元素重新設定高度。

如果對某些元素設定了左浮動，那麼這些元素會在同一排顯示，但是如果這些元素的寬度和大於父元素，超出的部分(包括該元素)就會在下一行顯示。

浮動元素需要遵守的規則（注意點）

• #浮動元素的左外邊界不能超出其包含塊的左內邊界，右亦然

• 防止元素彼此覆蓋，浮動元素的左(或右)外邊界必須是源文檔中之前出現的左浮動(右浮動)元素的右(或左)外邊界，除非後出現浮動元素的頂端在先出現浮動元素的底端下方。
  

• 浮動元素的左外邊界必須是原始檔案中先前出現的左浮動元素的右外邊界，除非後出現浮動元素的頂端在先出現浮動元素的底端下面。

• 左浮動元素的右外邊界不會出現在其右邊右浮動元素的左外邊界的右邊。

• 一個浮動元素的頂端不能比其父元素的內頂端更高

• #浮動元素的頂端不能比之前所有浮動元素或區塊級元素的頂端較高

• 如果來源文件中一個浮動元素之前出現另一個元素，浮動元素的頂端不能比包含該元素所產生框的任何​​行框的頂端更高。

• 浮動元素不能超出其包含元素的邊界。左(或右)浮動元素的左(或右)邊有另一個浮動元素，前者的右外邊界不能在其包含塊的右(或左)邊界的右(或左)邊。如果沒有足夠的空間，浮動元素會被擠到一個新的「行上」

• #浮動元素必須盡可能高地放置。即滿足其他約束條件的前提下，浮動得盡可能高。

• 左浮動元素必須向左盡可能遠，右浮動元素必須向右盡可能遠

浮動的排序規則

• 相同方向的浮動元素,先浮動的顯示在前面.因為浮動只會蓋住標準流.

• 不同方向的浮動元素,左浮找左浮,右浮找右浮

• #浮動元素浮動之後的位置,由浮動元素浮動之前在標準流中的位置來決定.

• 貼靠現象: 如果浮動的最後一個元素超過了父元素的寬度,會自動找上一個元素貼過去,如果寬度還是不夠,繼續找上一個~如果父元素寬度還是不夠的話,那就只能湊合呆著了

• 圖文混排

清除浮動

• 給前面一個父元素設定高度(在開發中最好不要設定高度,所以此方便不建議使用)

• 給後邊的元素設定clear屬性,(注意加入clear屬性後margin屬性就會失效)

• 隔間牆法

  • 外牆法 

    中間加個塊級元素並設定clear: both (注意: 可以在第二個盒子使用margin-top,但是第一個盒子不能使用margin-bottom ,所以一般既不設置第一個盒子的margin-bottom,也不設置第二個盒子的margin-top,而是直接設置額外塊級元素的高度) 

  • 內牆法 

    塊級元素寫到第一個盒子最後面並設定clear: both(注意: 第一個盒子可以使用margin-bottom,第二個盒子也可以使用margin-top.額外區塊級元素也可以設定高度) 

  • 區別: 內牆法可以撐起第一個盒子的高度,而外牆法不可以.(改方法同樣不建議使用,因為添加了額外的元素)

使用偽元素(建議使用)

.box1::after{
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
.box1{
    *zoom: 1;   // 兼容IE6
}

overflow: hidden(建議使用)

.box1{
    *zoom: 1;   // 兼容IE6
}

（學習影片分享： css影片教學、web前端）

以上是css元素浮動所需注意的幾點是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！