CSS基礎(chǔ)-浮動(dòng)

動(dòng)

浮動(dòng)是為了元素標(biāo)簽的并排顯示問(wèn)題。

我們?cè)跒g覽網(wǎng)頁(yè)的時(shí)候，經(jīng)常會(huì)看到幾個(gè) div 塊是可以并排顯示的，浮動(dòng)就是解決這樣問(wèn)題的方法之一。

float屬性有以下的值

float: left; 左浮動(dòng)

float: right 右浮動(dòng)

浮動(dòng)的特點(diǎn)

浮動(dòng)主要針對(duì)的是并排顯示的盒子而言。
在一個(gè)父容器的盒子里，兄弟元素之間要浮動(dòng)必須都浮動(dòng)。
父容器必須要有一個(gè)足夠的寬度，否則不足以使得各個(gè)子元素之間并排展示。
一個(gè)父容器的盒子內(nèi)，兄弟元素會(huì)按照順序貼靠，如果是左浮動(dòng)，就往左貼合；如果是右浮動(dòng)，就往右貼合。如果發(fā)現(xiàn)貼合的盒子后沒(méi)有足夠的空間，則會(huì)在尋找前一個(gè)兄弟元素進(jìn)行貼靠。直到空間合適為止。
浮動(dòng)的元素已經(jīng)脫離了標(biāo)準(zhǔn)的HTML文檔流，不再區(qū)分塊級(jí)元素、行內(nèi)元素并且一律能設(shè)置寬度和高度，即使它是span標(biāo)簽或者a標(biāo)簽

一個(gè)浮動(dòng)的例子

<!--一個(gè)浮動(dòng)的例子-->
<style>


    .box1 {
        width: 600px;
        height: 200px;
        border: 1px solid #000;
    }


    .box1 .con1 {
        width: 200px;
        height: 200px;
        background-color: orange;
        float: left;
    }


    .box1 .con2 {
        width: 200px;
        height: 200px;
        background-color: blue;
        float: left;
    }


    .box1 .con3 {
        width: 201px;
        height: 200px;
        background-color: yellowgreen;
        float: left;
    }
</style>
<div class="box1">
        <div class="con1"></div>
        <div class="con2"></div>
        <div class="con3"></div>
</div>

一個(gè)順序貼靠的例子

<!--  一個(gè)順序貼靠的例 子-->
<!-- 以下代碼中 兄弟元素 con1， con2， con3 之間會(huì)進(jìn)行順序貼靠-->
<!-- con3 在貼靠 con2 的時(shí)候，發(fā)現(xiàn)父容器的寬度只能是400px, 分別被con1 和 con2 占據(jù)， 所以con3 會(huì)找 cont1 貼靠，最終con3 位于 con1右邊， con2下邊 -->


<style>


  .box1 {
      width: 400px;
      height: 200px;
      border: 1px solid #000;
  }


  .box1 .con1 {
      width: 200px;
      height: 200px;
      background-color: orange;
      float: left;
  }


  .box1 .con2 {
      width: 200px;
      height: 100px;
      background-color: blue;
      float: left;
  }


  .box1 .con3 {
      width: 200px;
      height: 100px;
      background-color: yellowgreen;
      float: left;
  }
</style>
<div class="box1">
  <div class="con1"></div>
  <div class="con2"></div>
  <div class="con3"></div>
</div>

清除浮動(dòng)

清除浮動(dòng)是為了不影響設(shè)置浮動(dòng)標(biāo)簽的后續(xù)的標(biāo)簽的布局展示。

因?yàn)椋谝粋€(gè)父容器中，子元素浮動(dòng)了，脫離了標(biāo)準(zhǔn)文檔流，不在占用之前的位置，會(huì)導(dǎo)致無(wú)法撐開(kāi)沒(méi)有設(shè)置高度的父元素；從而導(dǎo)致后續(xù)的結(jié)構(gòu)擠壓，造成整個(gè)頁(yè)面布局的混亂。

給父元素加個(gè)高度。在那些明確知道父容器高度的情況下，可以使用。

<style>
  * {
    margin: 0;
    padding: 0;
  }


  div {
    height: 100px;
  }
  p {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    background-color: red;
  }
</style>


<body>
  <div>
    <p></p>
    <p></p>
  </div>


  <div>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>

后續(xù)元素增加 clear:both ,清除前面元素對(duì)自己的影響。

<style>
    * {
        margin: 0;
        padding: 0;
    }


    .box2 {
        margin-top: 20px;
        clear: both;
    }
    p {
        float: left;
        width: 100px;
        height: 100px;
        margin-right: 20px;
        background-color: red;
    }
</style>


<body>
<div>
    <p></p>
    <p></p>
</div>


<div class="box2">
    <p></p>
    <p></p>
    <p></p>
</div>
</body>

浮動(dòng)的父容器添加后續(xù)偽元素，clear:both ，清除浮動(dòng)對(duì)后續(xù)元素的影響(推薦方式)。

<style>
  * {
      margin: 0;
      padding: 0;
  }


  .cleafix::after {
      content: '';
      clear: both;
      display: block
  }


  p {
      float: left;
      width: 100px;
      height: 100px;
      margin-right: 20px;
      background-color: red;
  }
</style>


<body>


<div class="cleafix">
  <p></p>
  <p></p>
</div>


<div class="cleafix">
  <p></p>
  <p></p>
  <p></p>
</div>
</body>

額外的空標(biāo)簽，在浮動(dòng)元素的父盒子之后添加一個(gè)空標(biāo)簽，空標(biāo)簽上添加 clear:both 屬性。

<style>
* {
  margin: 0;
  padding: 0;
}


.clearboth {
  clear: both;
}


p {
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 20px;
  background-color: red;
}
</style>


<body>
<div>
<p></p>
<p></p>
</div>


<div class="clearboth"></div>


<div>
<p></p>
<p></p>
<p></p>
</div>
</body>

浮動(dòng)元素的父容器添加 overflow:hidden , 使得子元素的浮動(dòng)只能作用在父容器內(nèi)。

頁(yè)面布局中，有兩個(gè)非常常用的CSS屬性。它們巧妙的控制著塊級(jí)元素們之間的位置，靈活的讓塊級(jí)元素在一行內(nèi)顯示或者另起一行。說(shuō)到這里，相信大家已經(jīng)猜出來(lái)了，這兩個(gè)屬性就是控制塊級(jí)元素浮動(dòng)的屬性。整個(gè)頁(yè)面布局過(guò)程中，浮動(dòng)屬性的使用頻率是最高的。今天，小海老師就來(lái)帶領(lǐng)大家一同認(rèn)識(shí)這兩個(gè)神奇的CSS屬性。

承接文章：發(fā)揮個(gè)人的優(yōu)勢(shì)，踏踏實(shí)實(shí)的學(xué)習(xí)前端開(kāi)發(fā)，小海為你傳授學(xué)習(xí)心得

技術(shù)等級(jí)：初級(jí) | 適合前端開(kāi)發(fā)的初學(xué)者閱讀學(xué)習(xí)。

希望收藏了這篇文章的你同時(shí)也可以關(guān)注一下“小海前端”的頭條號(hào)，因?yàn)檫@些文章都是連載的，并且是經(jīng)過(guò)系統(tǒng)的歸納和總結(jié)的。塌下心來(lái)認(rèn)真閱讀，你一定會(huì)學(xué)到對(duì)你有用的知識(shí)。

一、浮動(dòng)屬性：

CSS技術(shù)使用float屬性來(lái)實(shí)現(xiàn)塊級(jí)元素的浮動(dòng)效果。

CSS技術(shù)使用float屬性實(shí)現(xiàn)浮動(dòng)效果

該屬性可以有下列取值：

left，控制塊級(jí)元素左浮動(dòng)。
right，控制塊級(jí)元素右浮動(dòng)。

屬性說(shuō)明：我們都知道，塊級(jí)元素之間默認(rèn)情況下是獨(dú)占一行的。也就是說(shuō)，兩個(gè)在代碼中緊密相連的塊級(jí)元素，它們的擺放位置是一個(gè)在上一行，另一個(gè)在下一行。盡管通過(guò)width和height屬性為塊級(jí)元素設(shè)置了大小，使得塊級(jí)元素?zé)o法占滿整個(gè)行，但是塊級(jí)元素右側(cè)空余的位置仍然不允許出現(xiàn)任何內(nèi)容。

讓我們一同來(lái)看下列實(shí)例：

HTML代碼如下所示：

<div id=”box01”></box>
<div id=”box02”></box>

CSS代碼如下所示：

#box01,#box02{
width:200px; height:100px;
}
#box01{background-color:#ff5857;}
#box02{background-color:#5857ff;}

上述代碼的運(yùn)行結(jié)果如下圖所示，這張圖為我們展示了兩個(gè)塊級(jí)元素默認(rèn)的位置擺放。

展示兩個(gè)塊級(jí)元素的默認(rèn)位置

如果我想讓兩個(gè)塊級(jí)元素在一行內(nèi)顯示該如何實(shí)現(xiàn)呢？這就需要float屬性登場(chǎng)了。

將#box01的CSS代碼中添加如下屬性：float:left，會(huì)發(fā)生什么情況呢？同學(xué)們實(shí)踐操作一下，我們會(huì)發(fā)現(xiàn)，屏幕中就只剩下紅色的塊級(jí)元素了。那藍(lán)色的#box02去哪里了呢？其實(shí)#box02響應(yīng)了#box01浮動(dòng)的號(hào)召，和#box01一同出現(xiàn)在同一行了，只是被壓在了紅色的#box01的下面。

解決方法就是讓藍(lán)色的#box02也添加上 float:left的屬性。這樣，兩個(gè)塊級(jí)元素就可以共同出現(xiàn)在一行了。下圖為我們展示了這樣的效果。

展示兩個(gè)塊級(jí)元素的左浮動(dòng)位置

下面讓我們?cè)倏匆粋€(gè)實(shí)例，這個(gè)實(shí)例中我們?yōu)閮蓚€(gè)塊級(jí)元素添加一個(gè)容器。

HTML代碼如下所示：

<div id=”box”>
<div class=”boxLeft”></div>
<div class=”boxRight></div>
</div>

我們?cè)O(shè)置容器#box的寬度為400px。內(nèi)部的兩個(gè)塊級(jí)元素：.boxLeft的寬度設(shè)置為150px；.boxRight的寬度設(shè)置為100px。要求讓這兩個(gè)內(nèi)部的塊級(jí)元素在一行內(nèi)顯示，并且分布到容器的兩端。

CSS代碼如下所示：

#box{
width:400px; height:100px;
background-color:#cccccc;
}
#box .boxLeft{
width:150px; height:100px;
background-color:#ff5857;
float:left;
}
#box .boxRight{
width:100px; height:100px;
background-color:# 5857 ff;
float:right;
}

我們可以看到，在.boxRight對(duì)象上，我們添加了float:right的CSS屬性，讓這個(gè)塊級(jí)元素發(fā)生了右浮動(dòng)，則該元素跑到了容器的最右側(cè)。下圖為我們展示了這樣的效果。

展示兩個(gè)塊級(jí)元素的左右浮動(dòng)位置

浮動(dòng)屬性的使用結(jié)論：

若希望多個(gè)塊級(jí)元素在一行內(nèi)顯示，則這幾個(gè)塊級(jí)元素都要具備float浮動(dòng)屬性。

二、清除浮動(dòng)屬性：

CSS技術(shù)使用clear屬性來(lái)實(shí)現(xiàn)塊級(jí)元素的清除浮動(dòng)效果。

CSS技術(shù)使用clear屬性設(shè)置清除浮動(dòng)效果

該屬性可以有下列取值：

left，清除塊級(jí)元素的左浮動(dòng)效果。
right，清除塊級(jí)元素的右浮動(dòng)效果。
both，清除塊級(jí)元素的兩端浮動(dòng)效果。

屬性說(shuō)明：根據(jù)上面的float屬性的使用，我們可想而知，一個(gè)緊跟在具有浮動(dòng)屬性的塊級(jí)元素后面的塊級(jí)元素，即使它不想和它前面的塊級(jí)元素在一行內(nèi)顯示，也會(huì)受到前面塊級(jí)元素浮動(dòng)屬性的影響，被壓在前面塊級(jí)元素的下方。

解決這個(gè)問(wèn)題，可以對(duì)不希望和前面塊級(jí)元素在同一行顯示的塊級(jí)元素使用清除浮動(dòng)屬性。

下面讓我們來(lái)看這個(gè)實(shí)例：

HTML代碼如下所示：

<div id=”box”>
<div class=”boxLeft”></div>
<div class=”boxRight></div>
</div>

CSS代碼如下所示（#box .boxRIght）：

#box .boxRight{
width:100px; height:100px;
background-color:# 5857ff;
clear:left;
}

因?yàn)?boxRight具備clear:left屬性，所以即使.boxLeft使用了float:left屬性，它們也仍舊分布在兩行，不會(huì)在同一行顯示。就好像沒(méi)有過(guò)使用任何浮動(dòng)效果似的。

小海教材

如果大家希望得到更加全面的關(guān)于HTML和CSS技術(shù)講解的內(nèi)容，可以私信我，我會(huì)免費(fèi)將小海老師自己編寫的HTML和CSS的PDF教材發(fā)給你，幫助你在前端開(kāi)發(fā)的道路上闊步前行。

小海聲明

在頭條上發(fā)表的這些文章都是從前端開(kāi)發(fā)的基礎(chǔ)開(kāi)始一步一步講起的。我非常希望能有更多的前端開(kāi)發(fā)初學(xué)者通過(guò)我寫的文章，逐步學(xué)到一定的知識(shí)，甚至慢慢有了入門的感覺(jué)。這些文章都是我這幾年教學(xué)過(guò)程中的經(jīng)驗(yàn)，每寫一篇時(shí)我都盡量把握好措辭，用簡(jiǎn)單易懂的語(yǔ)言描述，同時(shí)精心設(shè)計(jì)版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長(zhǎng)，但是都要耗費(fèi)小海老師很久的時(shí)間。

希望收藏了這篇文章的你同時(shí)也可以關(guān)注一下“小海前端”的頭條號(hào)，因?yàn)檫@些文章都是連載的，并且是經(jīng)過(guò)系統(tǒng)的歸納和總結(jié)的。塌下心來(lái)認(rèn)真閱讀，你一定會(huì)學(xué)到對(duì)你有用的知識(shí)。

關(guān)注“小海前端”，我會(huì)繼續(xù)為大家奉上更加深入的前端開(kāi)發(fā)文章，也希望更多的初學(xué)者跟著學(xué)下去，我們共同將前端開(kāi)發(fā)的路努力堅(jiān)持的走下去。

文章預(yù)告

結(jié)合前面所學(xué)的CSS知識(shí)，使用今天的浮動(dòng)屬性，可以做一個(gè)簡(jiǎn)單的導(dǎo)航欄。那么下一篇文章中，小海老師會(huì)帶領(lǐng)大家一同利用最近的所學(xué)，做一個(gè)水平放置的導(dǎo)航欄。效果非常酷炫，希望正在學(xué)習(xí)前端開(kāi)發(fā)的同學(xué)們千萬(wàn)不要錯(cuò)過(guò)。

SS中的浮動(dòng)（Floats）、定位（Positioning）和顯示（Display）屬性是前端工程師掌握頁(yè)面布局的關(guān)鍵。本文將深入探討這些屬性的工作原理和使用場(chǎng)景，幫助開(kāi)發(fā)者更好地理解和運(yùn)用它們來(lái)構(gòu)建響應(yīng)式和精確的網(wǎng)頁(yè)布局。

浮動(dòng)（Float）

浮動(dòng)是CSS中用于實(shí)現(xiàn)元素排列的一種方式，它可以讓元素脫離正常的文檔流，并可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)元素的邊緣。

.element {
  float: left; /* 或者 'right' */
}

使用場(chǎng)景

文字環(huán)繞圖片。
創(chuàng)建水平導(dǎo)航欄。
無(wú)網(wǎng)格系統(tǒng)時(shí)的列布局。

注意事項(xiàng)

清除浮動(dòng)（Clearing Floats）：使用clear屬性可以防止元素被浮動(dòng)元素覆蓋。

.clear-element {
  clear: both; /* 可以是 'left', 'right', 或 'both' */
}

包含浮動(dòng)（Containing Floats）：浮動(dòng)元素的父容器可能不會(huì)擴(kuò)展以包含浮動(dòng)的子元素，可以通過(guò)清除浮動(dòng)或使用其他技術(shù)（如overflow）來(lái)解決這個(gè)問(wèn)題。
浮動(dòng)塌陷（Float Collapse）：浮動(dòng)元素不占據(jù)空間，可能導(dǎo)致父元素高度塌陷。

定位（Position）

定位屬性允許你控制元素的位置，它可以是相對(duì)于它的正常位置、相對(duì)于最近的已定位祖先元素、相對(duì)于視口或絕對(duì)位置。

.element {
  position: static | relative | absolute | fixed | sticky;
}

使用場(chǎng)景

相對(duì)定位（Relative Positioning）：元素相對(duì)于其正常位置進(jìn)行偏移。

.relative-element {
  position: relative;
  top: 10px;
  left: 20px;
}

絕對(duì)定位（Absolute Positioning）：元素相對(duì)于最近的已定位父元素進(jìn)行定位。

.absolute-element {
  position: absolute;
  top: 0;
  right: 0;
}

固定定位（Fixed Positioning）：元素相對(duì)于視口進(jìn)行定位，即使頁(yè)面滾動(dòng)也不會(huì)移動(dòng)。

.fixed-element {
  position: fixed;
  bottom: 0;
  left: 0;
}

粘性定位（Sticky Positioning）：元素基于用戶的滾動(dòng)位置在相對(duì)和固定定位之間切換。

.sticky-element {
  position: sticky;
  top: 10px;
}

注意事項(xiàng)

定位元素可能會(huì)脫離文檔流，影響周圍元素的布局。
z-index屬性可以控制堆疊順序。
絕對(duì)定位元素的容器應(yīng)有position: relative;，以便正確定位。

顯示（Display）

display屬性是CSS中最重要的用于控制布局的屬性之一，它定義了元素如何顯示在頁(yè)面上。

.element {
  display: block | inline | inline-block | flex | grid | none;
}

使用場(chǎng)景

塊級(jí)元素（Block）：display: block;使元素表現(xiàn)為塊級(jí)，占據(jù)新的行。

.block-element {
  display: block;
}

內(nèi)聯(lián)元素（Inline）：display: inline;使元素在文本行中顯示，不開(kāi)始新行。

.inline-element {
  display: inline;
}

內(nèi)聯(lián)塊元素（Inline-Block）：display: inline-block;允許元素并排排列，同時(shí)擁有塊級(jí)元素的寬度和高度屬性。

.inline-block-element {
  display: inline-block;
}

彈性盒子（Flex）：display: flex;創(chuàng)建了一個(gè)彈性容器，其子元素可以靈活地在容器內(nèi)排列。

.flex-container {
  display: flex;
}

網(wǎng)格（Grid）：display: grid;創(chuàng)建了一個(gè)網(wǎng)格容器，可以定義行和列以及在網(wǎng)格內(nèi)放置元素。

.grid-container {
  display: grid;
}

隱藏元素（None）：display: none;將元素隱藏，且不為元素保留空間。

.hidden-element {
  display: none;
}

注意事項(xiàng)

使用display: none;與visibility: hidden;的區(qū)別在于后者仍保留元素占據(jù)的空間。
display: flex;和display: grid;為現(xiàn)代布局提供了更多控制，通常比浮動(dòng)和定位更優(yōu)。

示例

HTML結(jié)構(gòu)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Float, Position, and Display Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="header">
  <div class="logo">Logo</div>
  <div class="navigation">Navigation</div>
</div>

<div class="main-content">
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
</div>

<div class="footer">Footer</div>

<div class="fixed-element">Fixed Element</div>

</body>
</html>

CSS樣式

/* Reset some default styles */
body, h1, p {
  margin: 0;
  padding: 0;
}

/* Header styles */
.header {
  background-color: #f8f8f8;
  border-bottom: 1px solid #e7e7e7;
  padding: 10px;
  overflow: hidden; /* Clearfix for floated elements */
}

.logo {
  float: left;
  font-size: 24px;
}

.navigation {
  float: right;
  font-size: 18px;
}

/* Main content styles */
.main-content {
  padding: 20px;
}

.sidebar {
  float: left;
  width: 200px;
  background-color: #ddd;
  padding: 10px;
}

.content {
  margin-left: 220px; /* Make space for the sidebar */
  background-color: #eee;
  padding: 10px;
}

/* Footer styles */
.footer {
  background-color: #f8f8f8;
  border-top: 1px solid #e7e7e7;
  text-align: center;
  padding: 10px;
  position: relative; /* For demonstration purposes */
  top: 20px; /* Move the footer down a bit */
}

/* Fixed element styles */
.fixed-element {
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 5px 10px;
  background-color: #333;
  color: #fff;
  z-index: 1000; /* Ensure it stays on top */
}

/* Clearfix hack */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

在這個(gè)例子中，我們創(chuàng)建了一個(gè)包含頭部、側(cè)邊欄、主要內(nèi)容和頁(yè)腳的基本布局。我們使用浮動(dòng)來(lái)對(duì)齊頭部的Logo和導(dǎo)航，以及創(chuàng)建一個(gè)側(cè)邊欄。我們還使用了相對(duì)定位來(lái)稍微下移頁(yè)腳，并使用固定定位為頁(yè)面添加了一個(gè)始終可見(jiàn)的固定元素。最后，我們使用了overflow: hidden;來(lái)清除頭部中浮動(dòng)元素的影響。

結(jié)語(yǔ)

浮動(dòng)、定位和顯示屬性是CSS中構(gòu)建復(fù)雜布局的強(qiáng)大工具。通過(guò)深入理解和正確應(yīng)用這些屬性，前端工程師可以創(chuàng)建出既美觀又功能強(qiáng)大的網(wǎng)頁(yè)。隨著Web標(biāo)準(zhǔn)的不斷發(fā)展，我們也需要不斷學(xué)習(xí)和適應(yīng)新的CSS特性，以保持我們技能的前沿性。

在線咨詢

上一篇：HTML5源碼庫(kù) 適應(yīng)手機(jī)端的jQuery圖片滑塊動(dòng)
下一篇：用JavaScript的Brain.js訓(xùn)練人工智能

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

CSS基礎(chǔ)-浮動(dòng)

動(dòng)

清除浮動(dòng)

小海教材

小海聲明

文章預(yù)告

浮動(dòng)（Float）

使用場(chǎng)景

注意事項(xiàng)

定位（Position）

使用場(chǎng)景

注意事項(xiàng)

顯示（Display）

使用場(chǎng)景

注意事項(xiàng)

示例

HTML結(jié)構(gòu)

CSS樣式

結(jié)語(yǔ)

您的項(xiàng)目需求