【css]盒子的浮動

時間 2019-12-01

標籤 css 盒子浮動欄目 CSS 简体版

原文原文鏈接

在標準流中，一個塊級元素在水平方向會自動伸展，直到包含它的元素的邊界；而在豎直方向和兄弟元素依次排列，不能並排。使用「浮動」方式後，塊級元素的表現就會有所不一樣。
CSS中有一個float屬性，默認爲none，也就是標準流一般的狀況。若是將float屬性的值設置爲left或right，元素就會向其父元素的左側或右側靠緊，同時默認狀況下，盒子的寬度不在伸展，而是根據盒子裏面的內容的寬度來肯定。css

準備基礎代碼html

浮動的性質比較複雜，這裏先製做一個基礎的頁面，代碼以下。後面一系列的實驗將基於下面的代碼爲基礎，並根據不一樣的知識點添加不一樣的新代碼。瀏覽器

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
    margin:15px;
    font-family:Arial; font-size:12px;
}
.father {
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
}
.father div {
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
}
.father p {
    border:1px dashed #111111;
    background-color:#ff90ba;
}   
.son1 {
/* 這裏設置son1的浮動方式*/
}
.son2 {
/* 這裏設置son1的浮動方式*/
}
.son3 {
/* 這裏設置son1的浮動方式*/
}
</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div>
        <p>這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字，這裏是浮動框外圍的文字.</p>
    </div>
</body>
</html>

上面的代碼定義了4個<div>塊，其中的一個父塊，另外3個是它的子塊。爲了便於觀察，將各個塊都加上了邊框以及背景顏色，而且讓<body>標記以及各個div之間有必定的margin值。若是3個子div都沒有任何浮動設置，就爲標準流中的盒子狀態。在父盒子中，4個盒子各自向右伸展，豎直方向依次排列，以下圖。佈局

下面開始在這個基礎上作實驗，經過一些列的實驗，就能夠充分體會到浮動盒子具備哪些性質了。 spa

實驗一：設置第一個浮動的div3d

.son1 {
       float: left;      
}

效果以下圖，能夠看到標準流中的Box-2的文字在圍繞着Box-1排列，而此時Box-1的寬度再也不伸展，而是能容納下內容的最小寬度。與此同時，因爲Box-1脫離了標準流，而標準流中的Box-2會頂到原來Box-1的位置，所以Box-2的左邊框與Box-1的左邊框重合。code

實驗二：設置第二個浮動的divxml

繼續將Box-2的float屬性設置爲left，此時能夠看到Box-2也變爲根據內容肯定寬度，並使Box-3的文字圍繞Box-2排列。從下圖中能夠清晰的看出，Box-3的左邊框仍在Box-1左邊框下面，不然Box-1和Box-2之間的空白不會是深色，這個深色實際上就是Box-3的背景色，Box-1和Box-2之間的空白是由兩者的margin構成的。htm

實驗三：設置第三個浮動的div blog

接下來，咱們把Box-3也設置爲向左浮動，此時從下圖中能夠清楚的看到文字所在的盒子的範圍，以及文字會圍繞浮動的盒子排列。

實驗四：改變浮動方向

將Box-3改成向右浮動，即float:right。此時效果以下圖。

能夠看到Box-3移動到了最右端，文字段落盒子的範圍沒有改變，但文字卻夾在了Box-2和Box-3之間。此時，若是把瀏覽器窗口慢慢調整變窄，瀏覽器窗口就沒法在一行中容納Box-1到Box-3，Box-3會被擠到下一行中，但仍然保持向右浮動，這時文字會自動佈滿空間。

實驗五：再次改變浮動的方向

將Box-2改成向右浮動，Box-3改成向左浮動。從下圖能夠看出佈局沒有變化，只是Box-2和Box-3交換了位置。

如今，再次回到實驗中，把瀏覽器窗口慢慢變窄，當瀏覽器窗口沒法在一行中容納Box-1到Box-3時，和上一個實驗同樣會有一個Box被擠到下一個。那麼此次被擠到下一行的是哪個呢？答案是在HTML中寫在後面的，也就是Box-3會被擠到下一行中，但仍然保持向左浮動，會到下一行的左端，這時文字仍然會自動排列，以下圖。

實驗六：所有向左移動

下面把3個Box都設置爲向左浮動，而後再在Box-1中增長一行，使它的高度比原來高一些，以下圖所示。

那麼請想想，若是繼續把瀏覽器的窗口變窄，結果會如何呢？Box-3會被擠到下一行，那麼它會在Box-1的下面，仍是Box-2的下面呢？答案以下圖。

Box-3被擠到下一行並向左移動，發現Box-1比Box-2高出一起，這樣Box-3就會被卡住，進而停留在Box-2的下面。說道最後，須要很是注意的是，若是某個盒子被設置爲float，那麼它將脫離標準流，其後面的標準流中的盒子將再也不受它影響。

實驗七：使用clear屬性清除浮動的影響

以使文字的左右兩側同時圍繞浮動的盒子。首先將Box-1到Box-2的浮動都改成float:left，而Box-3的浮動爲float:right，以後再將Box-3的內容修改成：

<div class="son3">
    Box-3<br>
    Box-3<br>
    Box-3<br>
    Box-3
</div>

效果以下圖：

若是不但願文字圍繞浮動的盒子，又該如何呢？此時對圍繞文字所在標籤<p>的樣式進行以下修改後，從下面的效果圖中能夠看出，段落的上邊界向下移動，直到文字不受左邊的兩個盒子影響位置，但仍然受到Box-3的影響。

.father p {
    border:1px dashed #111111;
    background-color:#ff90ba;
    clear:left;
}

接着，將clear屬性設置爲right，將看到以下效果。因爲Box-3比較高，所以清除了右邊的影響，天然左邊也就不會受到影響了。還有說明的是能夠將clear屬性設置爲both，從直接消除左右兩邊浮動盒子的影響。

實驗八：擴展盒子的高度

關於clear的應用，這裏再給出一個例子，將文字所在的段落<p>標籤刪除，這時在父div裏面只有3個浮動的盒子，它們都不在標準流中，這時瀏覽器的顯示效果以下：

能夠看到，文字段落被刪除之後，父div的範圍縮成一條，是由padding和border構成的，也就是說，一個div的範圍是由它裏面的標準流內容決定的，與裏面的浮動內容無關。下面將介紹一種方法以使父div的範圍可以包含3個浮動的子div，見以下修改後的HTML代碼和與之對應的效果圖。

<div class="father">
    <div class="son1">Box-1<br>Box-1</div>
    <div class="son2">Box-2</div>
    <div class="son3">
        Box-3<br>
        Box-3<br>
        Box-3<br>
        Box-3
    </div>
    <div style="clear:both;border:0;padding:0;margin:0;"></div>
</div>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。