css元素浮動所需注意的事項有哪些

本文小編為大家詳細介紹“css元素浮動所需注意的事項有哪些”，內容詳細，步驟清晰，細節處理妥當，希望這篇“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元素浮動所需注意的事項有哪些”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。