21.HTML 浮動、定位和顯示屬性

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特性，以保持我們技能的前沿性。

動

使用CSS浮動，元素可以向左或向右推，允許其他元素包圍它。Float通常與圖像一起使用，但在使用布局時也很有用。float屬性的值為left，right，none。

none（默認值）確保元素不會浮動。

如果一個接一個放置幾個浮動元素，如果有足夠的空間，它們將彼此浮動。

例如，在打印布局中，可以將圖像設置到頁面中，使得文本根據需要在其周圍包圍。

清除浮動

浮動元素后面的元素將在其周圍流動。為避免這種情況，請使用clear屬性清除浮動。

面試中考察css的時候面試官可能會讓你聊一聊浮動,那么接下來我們將總結css中浮動的常見的問題

浮動的特點

文字環繞效果：通過設置float屬性，我們可以輕松實現圖文混排，讓文字圍繞在浮動元素周圍。

脫離文檔流：當一個元素浮動后，它將不再遵循正常的文檔流順序排列，而是移動到其所在容器邊緣，并盡可能向左或向右浮動。原本在其下方的內容會向上填充該元素原先在文檔流中的位置。參考下方例子,使用浮動之后span標簽蓋住了div標簽
賦予行內元素尺寸控制權：通常情況下，行內元素（如<span>）不能直接設置寬度和高度。然而，一旦設置了浮動，這些元素就具有了類似塊級元素的特性，允許開發者為其設定明確的寬高尺寸。

為span標簽設置寬高但是檢查發現寬高失效

使用浮動:

我們可以看到上述的span標簽的寬高生效,并且將div容器給蓋住了

缺點

盡管浮動功能強大，但它的一個顯著副作用就是可能導致后續元素布局的混亂：

后續元素布局錯亂：由于浮動元素脫離了文檔流，緊隨其后的元素可能會填補浮動元素騰出的空間，進而破壞原有的布局結構，尤其是在未正確處理浮動閉合的情況下。

消除浮動

為了克服上述布局難題，有幾種常見的清除浮動技術，其中一種是通過使用偽元素來清除浮動，另外一種則是利用Block Formatting Context（BFC）容器來包容浮動元素并恢復有序布局。

清除浮動的傳統手段

增加額外標簽清除浮動:在浮動元素之后增加一個空元素,設置clear:both,這樣后面的元素便不會受到浮動的影響,或者給其偽元素設置樣式
直接設置父容器尺寸：如果情況允許，也可以簡單地為浮動元素的父容器設置固定的寬高，但這并不總是最佳解決方案，因為它無法自適應內容的變化。

利用BFC容器

BFC（Block Formatting Context）是一種特殊的布局環境，在此環境下，內部元素的行為更易于預測和控制。以下是BFC的特點：

內部元素垂直堆疊：BFC內的子元素將會彼此垂直對齊，不相互重疊。
邊距重疊限制：在同一BFC中的相鄰塊級元素，其垂直邊距不會與外部元素合并，避免了常見的邊距合并問題。點擊查看邊距重疊問題
防止元素被浮動元素覆蓋：BFC有助于保持布局穩定性，防止非浮動元素被浮動元素所覆蓋。
計算高度時包含浮動元素：BFC在計算自身高度時會把浮動元素的高度考慮進去，保證了容器的高度能夠正確反映內容的高度。

創建BFC容器的方法

創建一個BFC容器可以通過以下途徑實現：

設置overflow屬性：將容器的overflow屬性設為auto、hidden或scroll，這會使瀏覽器自動為該容器創建一個新的BFC。

.container {
overflow: auto; /* 或 hidden、scroll */
}

更改display屬性：將容器的display屬性設置為inline-block、table-cell、flex或inline-flex其中之一，同樣能觸發BFC的創建。

.container {
display: inline-block; /* 或 table-cell、flex、inline-flex */
}

設置浮動：雖然不是理想的創建BFC場景，但將元素設置為浮動（即float屬性不為none）也能形成新的BFC。
利用偽元素創建BFC并清除浮動：在父容器后添加偽元素，并通過特定樣式使其成為BFC的同時清除浮動。


.parent:after{
  /* 設置添加子元素的內容是空 */
    content: '';  
    /* 設置添加子元素為塊級元素 */
    display: block;
    /* 設置添加的子元素的高度0 */
    height: 0;
    /* 設置添加子元素看不見 */
    visibility: hidden;
    /* 設置clear：both */
    clear: both;
  
}

浮動總結

特點:

實現文字環繞效果
能夠讓行內元素設置寬高
能夠使元素脫離文檔流,而之前占據的空間將會被其他元素占據

缺點: 造成后面的布局錯亂,增加布局的難度

清除浮動的影響:

為父容器設置寬高,如果條件允許
增加額外的元素在浮動元素最后面,并設置clear:both;,或者是在其偽元素:after設置樣式
將父容器變為bfc容器父容器屬性overflow為atuo,scroll,hidden 設置父容器浮動給父容器的偽類:after設置樣式父容器display的值設置為inline-flex,flex,table-cell,inline-block其中一個

BFC容器特點:

沒有邊距重疊問題
浮動元素不會遮住其它元素,并將其高度計算在內

本人還在學習中，水平有限，文章可能存在紕漏或錯誤，如有問題歡迎指正，感謝你閱讀這篇文章，如果你覺得寫得還行的話，不要忘記點贊、評論、收藏哦！祝事業有成,生活愉快！

作者：GuanYi
鏈接：https://juejin.cn/post/7332767759430991910

在線咨詢

上一篇：JavaScript前端應用：圖片自動按軌跡移動效果
下一篇：CSS3技巧之形狀（橢圓）

您的項目需求

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

整合營銷服務商

21.HTML 浮動、定位和顯示屬性

浮動（Float）

使用場景

注意事項

定位（Position）

使用場景

注意事項

顯示（Display）

使用場景

注意事項

示例

HTML結構

CSS樣式

結語

動

清除浮動

浮動的特點

缺點

消除浮動

清除浮動的傳統手段

利用BFC容器

創建BFC容器的方法

浮動總結

本人還在學習中，水平有限，文章可能存在紕漏或錯誤，如有問題歡迎指正，感謝你閱讀這篇文章，如果你覺得寫得還行的話，不要忘記點贊、評論、收藏哦！祝事業有成,生活愉快！

您的項目需求