3.2 CSS浮動屬性float

float 屬性定義元素在哪個方向浮動。以往這個屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。

float屬性值：

  • left：元素向左浮動
  • right：元素向右浮動
  • none：元素不浮動
  • inherit：從父級繼承的浮動屬性

clear屬性可去掉浮動屬性，clear屬性值：

  • left：去掉元素向左浮動
  • right：去掉元素向右浮動
  • both：左右兩側(cè)均去掉浮動
  • inherit：從父級繼承來的clear值

1. 示例

(1) 普通流(默認(rèn)靜態(tài)布局)

  • float.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動</title>
    <link href="style_float.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>
  • style_float.css
#div1{
    width: 100px;
    height: 100px;
    background-color: red;
}
#div2{
    width: 100px;
    height: 100px;
    background-color: blue;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
}

普通流.png

(2) 元素向左浮動

#div1{
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
}

備注：紅色元素向左浮動。紅色遮擋了藍(lán)色，相當(dāng)于絕對布局，紅色脫離了頁面，不占有頁面位置。

元素向左浮動.png

(2) 元素向右浮動

<html>
<head>
<style type="text/css">
#div1{
    width: 100px;
    height: 100px;
    background-color: red;
    float: right;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
}
</style>
</head>

<body>
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
</body>

</html>

元素向右浮動.png

(3) 所有元素向左浮動

<html>
<head>
<style type="text/css">
#div1{
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
    float: left;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}
</style>
</head>

<body>
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
</body>

</html>
所有元素向左浮動.png

(4) 浮動—主容器寬度可承載所有內(nèi)容的情況

<html>
<head>
<style type="text/css">
#div1{
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
    float: left;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}
#div{
    width: 400px;
    height: 500px;
    background-color: darkgray;
}
</style>
</head>

<body>
  <div id="div">
      <div id="div1"></div>
      <div id="div2"></div>
      <div id="div3"></div>
  </div>
</body>

</html>

浮動—主容器寬度可承載所有內(nèi)容的情況.png

(5) 浮動—主容器寬度未能承載所有內(nèi)容的情況

<html>
<head>
<style type="text/css">
#div1{
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
    float: left;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}
#div{
    width: 300px;
    height: 500px;
    background-color: darkgray;
}
</style>
</head>

<body>
  <div id="div">
      <div id="div1"></div>
      <div id="div2"></div>
      <div id="div3"></div>
  </div>
</body>

</html>
浮動—主容器寬度未能承載所有內(nèi)容的情況-eg1.png
<html>
<head>
<style type="text/css">
#div1{
    width: 100px;
    height: 150px;
    background-color: red;
    float: left;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
    float: left;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}
#div{
    width: 300px;
    height: 500px;
    background-color: darkgray;
}
</style>
</head>

<body>
  <div id="div">
      <div id="div1"></div>
      <div id="div2"></div>
      <div id="div3"></div>
  </div>
</body>

</html>

浮動—主容器寬度未能承載所有內(nèi)容的情況-eg2.png

(6) 繼承父級浮動屬性

<html>
<head>
<style type="text/css">
#div1{
    width: 100px;
    height: 150px;
    background-color: red;
    float: left;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
    float: left;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}
#div{
    width: 300px;
    height: 500px;
    background-color: darkgray;
}
</style>
</head>

<body>
  <div id="div">
      <div id="div1"></div>
      <div id="div2"></div>
      <div id="div3"></div>
      Hello
  </div>
</body>

</html>
繼承父級浮動屬性-eg1.png
<html>
<head>
<style type="text/css">
#div1{
    width: 100px;
    height: 150px;
    background-color: red;
    float: left;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
    float: left;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}
#div{
    width: 300px;
    height: 500px;
    background-color: darkgray;
}
</style>
</head>

<body>
  <div id="div">
      <div id="div1"></div>
      <div id="div2"></div>
      <div id="div3"></div>
      Hello World
  </div>
</body>

</html>
繼承父級浮動屬性-eg2.png
<html>
<head>
<style type="text/css">
#div1{
    width: 100px;
    height: 150px;
    background-color: red;
    float: left;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
    float: left;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}
#div{
    width: 300px;
    height: 500px;
    background-color: darkgray;
}
</style>
</head>

<body>
  <div id="div">
      <div id="div1"></div>
      <div id="div2"></div>
      <div id="div3"></div>
      HelloWorld!
  </div>
</body>

</html>

繼承父級浮動屬性-eg3.png

(5) 去掉繼承于父級的浮動屬性

<html>
<head>
<style type="text/css">
#div1{
    width: 100px;
    height: 150px;
    background-color: red;
    float: left;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
    float: left;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}
#div{
    width: 300px;
    height: 500px;
    background-color: darkgray;
}
#text{
    clear: left;
}
</style>
</head>

<body>
  <div id="div">
      <div id="div1"></div>
      <div id="div2"></div>
      <div id="div3"></div>
      <div id="text">HelloWorld!</div>
  </div>
</body>

</html>
去掉繼承于父級的浮動屬性.png

2. float應(yīng)用

(1) 實現(xiàn)瀑布流布局效果

  • float_practice.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float屬性實現(xiàn)瀑布流布局效果</title>
    <link href="style_float.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="mydiv">
        <ul>
            <li><img src="../img/1.jpg"></li>
            <li><img src="../img/2.PNG"></li>
            <li><img src="../img/3.PNG"></li>
        </ul>
        <ul>
            <li><img src="../img/4.PNG"></li>
            <li><img src="../img/5.PNG"></li>
            <li><img src="../img/6.PNG"></li>
        </ul>
        <ul>
            <li><img src="../img/7.PNG"></li>
            <li><img src="../img/8.PNG"></li>
            <li><img src="../img/9.PNG"></li>
        </ul>
    </div>
</body>
</html>
  • style_float.css
/*通配符選擇器*：所有的標(biāo)簽或元素*/
*{
    margin: 0px;
    padding: 0px;
}
#mydiv{
    width: 950px;
    height: auto;
    margin: 20px auto;
}
ul{
    width: 250px;
    float: left;
}
li{
    list-style: none;
}
img{
    width: 200px;
    height: 200px;
}

通配符選擇器*： 所有的標(biāo)簽或元素
auto ： 自適應(yīng)

瀑布流效果布局.png

(2) 使文字環(huán)繞在圖像周圍(float浮動的最初目的)

<html>
<head>
<style type="text/css">
img 
{
float:right;
border:1px dotted black;
margin:0px 0px 15px 20px;
}
</style>
</head>

<body>
<p>在下面的段落中，我們添加了一個樣式為 <b>float:right</b> 的圖像。結(jié)果是這個圖像會浮動到段落的右側(cè)。</p>
<p>
<img src="/i/eg_cute.gif" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>

</html>
圖片浮動.png

問題：既然浮動元素脫離了文檔流，為什么文字會環(huán)繞在浮動元素的周邊而不是跟浮動元素重合呢？為了明白這個問題，必須先弄明白幾個問題：
① 浮動的目的：最初浮動只能用于圖像，目的就是為了允許其他內(nèi)容（如文本）“圍繞”該圖像。而后來的CSS允許浮動任何元素。
② 絕對定位與浮動的區(qū)別：絕對定位是將元素徹底從文檔流刪除，該元素不會影響其他元素的布局；而浮動雖然也會將元素從文檔的正常流中刪除，并把元素向左或右邊浮動，但是該浮動元素還是會影響布局，即：一個元素浮動時，其他內(nèi)容會“環(huán)繞”該元素，避免其他內(nèi)容被浮動的元素覆蓋掉。

(3) 實現(xiàn)塊級元素同行排列(現(xiàn)在float用得最多的使用場景)

<html>
<head>
<style type="text/css">
#wrap{
    width:50%;
    background-color:gray
}
#div1{
    background-color:purple;
    float: left;
    width:50px;
    height:50px;
}
#div2 {
    float: right;
    background-color:cyan;
    width:50px;
    height:50px;
}
#div3 {
    float: right;
    background-color:olive;
    width:50px;
    height:50px;
}
#div4 {
    clear:both;
}
#content{
    background-color:pink;
    width:50%;
    height:100px;
    clear:both;
}
</style>
</head>

<body>
<div id="wrap">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    <div id="div4"></div>
</div>
<div id="content">
    內(nèi)容
</div>
</body>

</html>
塊級元素同行排列.png

拓展：元素浮動雖然使元素顯示更為靈活，但同時也會帶來一些問題，參考解決子元素浮動導(dǎo)致父元素高度塌陷的問題(清除浮動的方法)。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 自我總結(jié)： 浮動是實現(xiàn)布局的一種常見方式 浮動脫離普通文檔流，即頁面渲染時，盒模型按標(biāo)準(zhǔn)會將父元素所設(shè)置的屬性將頁...
    饑人谷_遠(yuǎn)方閱讀 492評論 0贊 0
  • 一，文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流? 答：文檔流W3C規(guī)范中并沒有document flow這...
    kingBirds閱讀 641評論 0贊 2
  • 普通流(normal flow) 這個單詞很多人翻譯為 文檔流 ， 字面翻譯 普通流 或者標(biāo)準(zhǔn)流都可以。 前面我們...
    王玉偉的偉閱讀 516評論 0贊 1
  • 談話是每個人一生的功課。曾經(jīng)有科學(xué)家做過統(tǒng)計，人這一輩子和別人說過的話，是一個天文數(shù)字，以至于最后科學(xué)家用一...
    謝先生讀書會閱讀 614評論 1贊 10
  • 這里推薦一些swift的學(xué)習(xí)資料，借花獻(xiàn)佛； swift 官方手冊 3.0.1 （中文版） swift 官方手冊 ...
    weiwei_js閱讀 224評論 0贊 0

友情鏈接更多精彩內(nèi)容