【前端】CSS : float

時間 2019-11-08

標籤前端 css float 欄目 CSS 简体版

原文原文鏈接

介紹

float屬性指定一個元素應沿其容器的左側或右側放置，容許文本和內聯元素環繞它。css

注：當一個元素浮動以後，從普通文檔流中脫離，而後向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另一個浮動的元素。html

浮動元素的浮動位置不能超過包含塊的內邊界前端

基本屬性

none：不進行浮動（默認）
left：浮動在其所在的塊容器左側
right：浮動在其所在的塊容器右側

使用

介紹其實很簡單，怎樣用好它就須要實踐了。segmentfault

show me code ！！！佈局

浮動實驗

下面經過一步步的實驗，來學習並瞭解floatpost

先來三個box

樣式就不貼了學習

<div>
    <div class="box box1">1</div>
    <div class="box box2 ">2</div>
    <div class="box box3 ">3</div>
</div>
複製代碼

效果：正常的文檔流 spa

實驗1：爲box2添加浮動

.float-right {
    float: right;
}
複製代碼

<div>
    <div class="box box1">1</div>
    <div class="box box2 float-right">2</div>
    <div class="box box3 ">3</div>
</div>
複製代碼

效果：爲box2添加 float: right;後，能夠看到box2跑到右邊去了，box3緊跟在box1下面。翻譯

疑問：box2和box3爲何不在一條水平線上？（爲什浮動後有間隙？）緣由：邊界重疊；塊級元素的上外邊距和下外邊距有時會合並（或摺疊）爲一個外邊距，其大小取其中的最大者，這種行爲稱爲外邊距摺疊（margin collapsing），有時也翻譯爲外邊距合併。浮動元素和絕對定位元素的外邊距不會摺疊。詳情3d

實驗2：box二、box3都添加浮動

<div>
    <div class="box box1">1</div>
    <div class="box box2 float-right">2</div>
    <div class="box box3 float-right">3</div>
</div>
複製代碼

效果：先是box2向右浮動，而後box3緊跟着box2向右浮動。

實驗3：多個元素浮動，且超出屏幕寬度

<div>
    <div class="box box1">1</div>
    <div class="box box2 float-right">2</div>
    <div class="box box3 float-right">3</div>
    <div class="box box2 float-right">2</div>
    <div class="box box3 float-right">3</div>
</div>
複製代碼

效果：當下個浮動元素髮現空間不夠時會換行

實驗4：左右浮動

<div>
    <div class="box box1">1</div>
    <div class="box box2 float-right">2</div>
    <div class="box box3 float-left">3</div>
</div>
複製代碼

效果1：空間足夠時，分別位於屏幕兩側

效果2：空間不足時，位於下發的元素會另起一行

浮動的元素不會「幹」在一塊兒，『手動滑稽』

清除浮動

咱們知道，一個塊級元素若是沒有設置height，其height是由子元素撐開的。對子元素使用了浮動以後，子元素會脫離標準文檔流，也就是說，父級元素中沒有內容能夠撐開其高度，這樣父級元素的height就會被忽略，這就是所謂的高度塌陷。要解決這樣的問題，咱們就是要使用清除浮動——clear。

clear屬性 指定一個元素是否能夠在它以前的浮動元素旁邊，或者必須向下移動(清除浮動) 到這些浮動元素的下面。

none：默認值。容許浮動元素出如今兩側
left：在左側不容許浮動元素
right：在右側不容許浮動元素
both：在左右兩側均不容許浮動元素。

例：上面提到僅box2浮動時，box3會緊跟在box1下方，可能被box2蓋住。以下圖：

若是不想被box2蓋住，怎麼怎麼辦？

解決辦法： 爲box3添加clear屬性

.float-clear-right {
    clear: right;
}
複製代碼

<div>
    <div class="box box1">1</div>
    <div class="box box2 float-right">2</div>
    <div class="box box3 float-clear-right">3</div>
</div>
複製代碼

效果：box3添加清除右浮動後，不受右浮動的影響，回到原來的位置了

文字環繞

經過float實現一個文字環繞效果，很簡單

例：

.float-left {
    float: left;
}
複製代碼

<div>
    <img class="float-left" src="../image/image1.png" style="height: 100px; width: 100px;">
    <p >
        Java是世界上最好的語言。Java是世界上最好的語言。
        Java是世界上最好的語言。Java是世界上最好的語言。
        Java是世界上最好的語言。Java是世界上最好的語言。
        Java是世界上最好的語言。Java是世界上最好的語言。</p>
</div>
複製代碼

效果：

很簡單，看效果挺好的。然而，看似簡單的背後，每每「暗藏殺機」

爲了方便看效果，爲元素添加背景色

遇到問題

<p>中的文字內容不少的時候，很健康。若是文字內容少點？

你覺得的結果是這樣：

實際效果倒是這樣：

這就搞笑了，浮動的元素<img>超出了父元素<div>，飄在上面了。若是在後面加一個div會怎麼樣？

<div class="box">box</div>
複製代碼

效果： 後續的佈局頂上來了，且box中的文本還被擠過來了。

跟上面同樣，也是高度塌陷問題 因此，清除浮動後，就能解決這個問題

解決辦法1：清除浮動 效果：

這個問題是解決了，剛緩口氣，又發現了另外一個問題：margin-top不生效。（準確來講是小於必定數值不生效）

例：爲box添加margin-top

{ margin-top: 20px }
複製代碼

效果：沒有任何效果，margin-top:20px沒有生效

這種狀況下margin-top失效的緣由

解決辦法2：BFC BFC 全稱block formatting context，中文爲"塊級格式化上下文"。BFC元素是不可能發生margin重疊的，另外，BFC元素也能夠用來清除浮動的影響。因此：BFC不只能夠處理浮動的影響，還能處理margin重疊的問題

BFC的觸發條件有不少，其中之一：overflow的值爲auto、scroll或者hidden

應用：爲外層<div>添加overflow:hidden

<div style="overflow: hidden">
    <img ...>
    <p ...></p>
</div>
複製代碼

效果：外層div的高度也有了，box的margin-top也生效了

只要知足下面任意一個條件就會觸發BFC: ● html根元素； ● float的值不爲none； ● overflow的值爲auto、scroll或者hidden； ● display的值爲table-cell、table-caption和inline-block中的任何一個； ● position的值不爲relative和static；