css元素浮動(dòng)所需注意的事項(xiàng)有哪些

本文小編為大家詳細(xì)介紹“css元素浮動(dòng)所需注意的事項(xiàng)有哪些”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“css元素浮動(dòng)所需注意的事項(xiàng)有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

注意點(diǎn)：1、浮動(dòng)元素的左外邊界不能超出其包含塊的左內(nèi)邊界，右外邊界亦然；2、一個(gè)浮動(dòng)元素的頂端不能比其父元素的內(nèi)頂端更高；3、浮動(dòng)元素的頂端不能比之前浮動(dòng)元素或塊級(jí)元素的頂端更高；4、左浮動(dòng)元素必須向左盡可能遠(yuǎn)，右浮動(dòng)元素須向右盡可能遠(yuǎn)等。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css中的浮動(dòng)：

在css中為了讓元素移動(dòng)到父元素的左邊或者右邊，我們可以對(duì)元素設(shè)置浮動(dòng)float.

float:left/right

浮動(dòng)的選擇有兩種，一種是float:left左浮動(dòng)。還有一種是float:right右浮動(dòng)

如果對(duì)一個(gè)元素設(shè)置了浮動(dòng)，那么這個(gè)元素就會(huì)脫離標(biāo)準(zhǔn)文檔流，并且該元素后面的元素會(huì)占據(jù)該元素原本的位置，并且元素后面的內(nèi)容會(huì)被擠出。

加了浮動(dòng)的元素是沒有寬和高的，并且該元素的父元素的高度也會(huì)顯示即高度塌陷，加了浮動(dòng)的元素的寬和高是根據(jù)元素內(nèi)部的內(nèi)容動(dòng)態(tài)需變化的。要對(duì)其父元素重新設(shè)置高度。

如果對(duì)某些元素設(shè)置了左浮動(dòng)，那么這些元素會(huì)在同一排顯示，但是如果這些元素的寬度和大于父元素，超出的部分(包括該元素)就會(huì)在下一行顯示。

浮動(dòng)元素需要遵守的規(guī)則（注意點(diǎn)）

• 浮動(dòng)元素的左外邊界不能超出其包含塊的左內(nèi)邊界，右亦然

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

• 浮動(dòng)元素的左外邊界必須是源文件中之前出現(xiàn)的左浮動(dòng)元素的右外邊界，除非后出現(xiàn)浮動(dòng)元素的頂端在先出現(xiàn)浮動(dòng)元素的底端下面。

• 左浮動(dòng)元素的右外邊界不會(huì)出現(xiàn)在其右邊右浮動(dòng)元素的左外邊界的右邊。

• 一個(gè)浮動(dòng)元素的頂端不能比其父元素的內(nèi)頂端更高

• 浮動(dòng)元素的頂端不能比之前所有浮動(dòng)元素或塊級(jí)元素的頂端更高

• 如果源文檔中一個(gè)浮動(dòng)元素之前出現(xiàn)另一個(gè)元素，浮動(dòng)元素的頂端不能比包含該元素所生成框的任何行框的頂端更高。

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

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

• 左浮動(dòng)元素必須向左盡可能遠(yuǎn)，右浮動(dòng)元素必須向右盡可能遠(yuǎn)

浮動(dòng)的排序規(guī)則

• 相同方向的浮動(dòng)元素,先浮動(dòng)的顯示在前面.因?yàn)楦?dòng)只會(huì)蓋住標(biāo)準(zhǔn)流.

• 不同方向的浮動(dòng)元素,左浮找左浮,右浮找右浮

• 浮動(dòng)元素浮動(dòng)之后的位置,由浮動(dòng)元素浮動(dòng)之前在標(biāo)準(zhǔn)流中的位置來決定.

• 貼靠現(xiàn)象: 如果浮動(dòng)的最后一個(gè)元素超過了父元素的寬度,會(huì)自動(dòng)找上一個(gè)元素貼過去,如果寬度還是不夠,繼續(xù)找上一個(gè)~如果父元素寬度還是不夠的話,那就只能湊合呆著了

• 圖文混排

清除浮動(dòng)

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

• 給后邊的元素設(shè)置clear屬性,(注意添加clear屬性后margin屬性就會(huì)失效)

• 隔墻法

• 外墻法

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

• 內(nèi)墻法

  塊級(jí)元素寫到第一個(gè)盒子最后面并設(shè)置clear: both(注意: 第一個(gè)盒子可以使用margin-bottom,第二個(gè)盒子也可以使用margin-top.額外塊級(jí)元素也可以設(shè)置高度)

• 區(qū)別: 內(nèi)墻法可以撐起第一個(gè)盒子的高度,而外墻法不可以.(改方法同樣不建議使用,因?yàn)樘砑恿祟~外的元素)

使用偽元素 (建議使用)

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

overflow: hidden(建議使用)

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

讀到這里，這篇“css元素浮動(dòng)所需注意的事項(xiàng)有哪些”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。