CSS基礎-浮動

動

浮動是為了元素標簽的并排顯示問題。

我們在瀏覽網頁的時候，經常會看到幾個 div 塊是可以并排顯示的，浮動就是解決這樣問題的方法之一。

float屬性有以下的值

float: left; 左浮動

float: right 右浮動

浮動的特點

浮動主要針對的是并排顯示的盒子而言。
在一個父容器的盒子里，兄弟元素之間要浮動必須都浮動。
父容器必須要有一個足夠的寬度，否則不足以使得各個子元素之間并排展示。
一個父容器的盒子內，兄弟元素會按照順序貼靠，如果是左浮動，就往左貼合；如果是右浮動，就往右貼合。如果發現貼合的盒子后沒有足夠的空間，則會在尋找前一個兄弟元素進行貼靠。直到空間合適為止。
浮動的元素已經脫離了標準的HTML文檔流，不再區分塊級元素、行內元素并且一律能設置寬度和高度，即使它是span標簽或者a標簽

一個浮動的例子

<!--一個浮動的例子-->
<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>

一個順序貼靠的例子

<!--  一個順序貼靠的例 子-->
<!-- 以下代碼中 兄弟元素 con1， con2， con3 之間會進行順序貼靠-->
<!-- con3 在貼靠 con2 的時候，發現父容器的寬度只能是400px, 分別被con1 和 con2 占據， 所以con3 會找 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>

清除浮動

清除浮動是為了不影響設置浮動標簽的后續的標簽的布局展示。

因為，在一個父容器中，子元素浮動了，脫離了標準文檔流，不在占用之前的位置，會導致無法撐開沒有設置高度的父元素；從而導致后續的結構擠壓，造成整個頁面布局的混亂。

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

<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>

后續元素增加 clear:both ,清除前面元素對自己的影響。

<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>

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

<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>

額外的空標簽，在浮動元素的父盒子之后添加一個空標簽，空標簽上添加 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>

浮動元素的父容器添加 overflow:hidden , 使得子元素的浮動只能作用在父容器內。

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

承接文章：發揮個人的優勢，踏踏實實的學習前端開發，小海為你傳授學習心得

技術等級：初級 | 適合前端開發的初學者閱讀學習。

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

一、浮動屬性：

CSS技術使用float屬性來實現塊級元素的浮動效果。

CSS技術使用float屬性實現浮動效果

該屬性可以有下列取值：

left，控制塊級元素左浮動。
right，控制塊級元素右浮動。

屬性說明：我們都知道，塊級元素之間默認情況下是獨占一行的。也就是說，兩個在代碼中緊密相連的塊級元素，它們的擺放位置是一個在上一行，另一個在下一行。盡管通過width和height屬性為塊級元素設置了大小，使得塊級元素無法占滿整個行，但是塊級元素右側空余的位置仍然不允許出現任何內容。

讓我們一同來看下列實例：

HTML代碼如下所示：

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

CSS代碼如下所示：

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

上述代碼的運行結果如下圖所示，這張圖為我們展示了兩個塊級元素默認的位置擺放。

展示兩個塊級元素的默認位置

如果我想讓兩個塊級元素在一行內顯示該如何實現呢？這就需要float屬性登場了。

將#box01的CSS代碼中添加如下屬性：float:left，會發生什么情況呢？同學們實踐操作一下，我們會發現，屏幕中就只剩下紅色的塊級元素了。那藍色的#box02去哪里了呢？其實#box02響應了#box01浮動的號召，和#box01一同出現在同一行了，只是被壓在了紅色的#box01的下面。

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

展示兩個塊級元素的左浮動位置

下面讓我們再看一個實例，這個實例中我們為兩個塊級元素添加一個容器。

HTML代碼如下所示：

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

我們設置容器#box的寬度為400px。內部的兩個塊級元素：.boxLeft的寬度設置為150px；.boxRight的寬度設置為100px。要求讓這兩個內部的塊級元素在一行內顯示，并且分布到容器的兩端。

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對象上，我們添加了float:right的CSS屬性，讓這個塊級元素發生了右浮動，則該元素跑到了容器的最右側。下圖為我們展示了這樣的效果。

展示兩個塊級元素的左右浮動位置

浮動屬性的使用結論：

若希望多個塊級元素在一行內顯示，則這幾個塊級元素都要具備float浮動屬性。

二、清除浮動屬性：

CSS技術使用clear屬性來實現塊級元素的清除浮動效果。

CSS技術使用clear屬性設置清除浮動效果

該屬性可以有下列取值：

left，清除塊級元素的左浮動效果。
right，清除塊級元素的右浮動效果。
both，清除塊級元素的兩端浮動效果。

屬性說明：根據上面的float屬性的使用，我們可想而知，一個緊跟在具有浮動屬性的塊級元素后面的塊級元素，即使它不想和它前面的塊級元素在一行內顯示，也會受到前面塊級元素浮動屬性的影響，被壓在前面塊級元素的下方。

解決這個問題，可以對不希望和前面塊級元素在同一行顯示的塊級元素使用清除浮動屬性。

下面讓我們來看這個實例：

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;
}

因為.boxRight具備clear:left屬性，所以即使.boxLeft使用了float:left屬性，它們也仍舊分布在兩行，不會在同一行顯示。就好像沒有過使用任何浮動效果似的。

小海教材

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

小海聲明

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

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。

文章預告

結合前面所學的CSS知識，使用今天的浮動屬性，可以做一個簡單的導航欄。那么下一篇文章中，小海老師會帶領大家一同利用最近的所學，做一個水平放置的導航欄。效果非常酷炫，希望正在學習前端開發的同學們千萬不要錯過。

SS中的浮動（Floats）、定位（Positioning）和顯示（Display）屬性是前端工程師掌握頁面布局的關鍵。本文將深入探討這些屬性的工作原理和使用場景，幫助開發者更好地理解和運用它們來構建響應式和精確的網頁布局。

浮動（Float）

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

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

使用場景

文字環繞圖片。
創建水平導航欄。
無網格系統時的列布局。

注意事項

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

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

包含浮動（Containing Floats）：浮動元素的父容器可能不會擴展以包含浮動的子元素，可以通過清除浮動或使用其他技術（如overflow）來解決這個問題。
浮動塌陷（Float Collapse）：浮動元素不占據空間，可能導致父元素高度塌陷。

定位（Position）

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

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

使用場景

相對定位（Relative Positioning）：元素相對于其正常位置進行偏移。

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

絕對定位（Absolute Positioning）：元素相對于最近的已定位父元素進行定位。

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

固定定位（Fixed Positioning）：元素相對于視口進行定位，即使頁面滾動也不會移動。

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

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

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

注意事項

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

顯示（Display）

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

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

使用場景

塊級元素（Block）：display: block;使元素表現為塊級，占據新的行。

.block-element {
  display: block;
}

內聯元素（Inline）：display: inline;使元素在文本行中顯示，不開始新行。

.inline-element {
  display: inline;
}

內聯塊元素（Inline-Block）：display: inline-block;允許元素并排排列，同時擁有塊級元素的寬度和高度屬性。

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

彈性盒子（Flex）：display: flex;創建了一個彈性容器，其子元素可以靈活地在容器內排列。

.flex-container {
  display: flex;
}

網格（Grid）：display: grid;創建了一個網格容器，可以定義行和列以及在網格內放置元素。

.grid-container {
  display: grid;
}

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

.hidden-element {
  display: none;
}

注意事項

使用display: none;與visibility: hidden;的區別在于后者仍保留元素占據的空間。
display: flex;和display: grid;為現代布局提供了更多控制，通常比浮動和定位更優。

示例

HTML結構

<!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;
}

在這個例子中，我們創建了一個包含頭部、側邊欄、主要內容和頁腳的基本布局。我們使用浮動來對齊頭部的Logo和導航，以及創建一個側邊欄。我們還使用了相對定位來稍微下移頁腳，并使用固定定位為頁面添加了一個始終可見的固定元素。最后，我們使用了overflow: hidden;來清除頭部中浮動元素的影響。

結語

浮動、定位和顯示屬性是CSS中構建復雜布局的強大工具。通過深入理解和正確應用這些屬性，前端工程師可以創建出既美觀又功能強大的網頁。隨著Web標準的不斷發展，我們也需要不斷學習和適應新的CSS特性，以保持我們技能的前沿性。

在線咨詢

上一篇：HTML5源碼庫適應手機端的jQuery圖片滑塊動
下一篇：用JavaScript的Brain.js訓練人工智能

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS基礎-浮動

動

清除浮動

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

小海教材

小海聲明

文章預告

浮動（Float）

使用場景

注意事項

定位（Position）

使用場景

注意事項

顯示（Display）

使用場景

注意事項

示例

HTML結構

CSS樣式

結語

您的項目需求