<div>層疊懸?。–SS　Cascading　and　Floating）是指一種用于布局和樣式管理的技術。層疊（Cascading）是指當多個樣式同時應用于同一元素時，瀏覽器會根據一定的規則決定使用哪個樣式。而懸?。‵loating）是指當一個元素浮動在其他元素之上或之下，改變了元素在頁面上的位置。通過使用層疊和懸浮，我們可以實現更靈活多樣的頁面布局和交互效果。</div>

案例一：層疊樣式的應用

在HTML中，我們可以通過<style>標簽或外部樣式表來定義樣式。當多個樣式同時應用于一個元素時，瀏覽器會根據以下的優先級規則來選擇使用哪個樣式：

<ol> <li>內聯樣式（在HTML標簽的style屬性中定義的樣式）</li> <li>內部樣式（在<style>標簽中定義的樣式）</li> <li>外部樣式（外部樣式表中定義的樣式）</li> <li>瀏覽器默認樣式</li> </ol>

下面是一個示例，展示了層疊樣式的應用：

<style>
.text {
color: red;
font-weight: bold;
}
</style>
<br>
<p class="text" style="color: blue;">這是一段文字</p>

在上述代碼中，.text類選擇器定義了文字的顏色為紅色并加粗，而內聯樣式將顏色修改為藍色。由于內聯樣式的優先級更高，所以頁面中的文字將顯示為藍色。

案例二：浮動元素的布局

浮動是指將一個元素從正常的文檔流中移除，并使其向左或向右浮動，直到遇到父元素的邊界或其他浮動元素。通過浮動元素，我們可以實現多列布局、圖文混排等效果。

下面是一個示例，展示了如何使用浮動布局：

<style>
.box {
width: 200px;
height: 200px;
background-color: lightblue;
float: left;
margin-right: 20px;
}
</style>
<br>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

在上述代碼中，我們使用.box類選擇器定義了一個寬高為200px的藍色盒子，并通過float屬性使其向左浮動。由于設置了margin-right屬性，盒子之間有20px的間距。結果會顯示3個并列的盒子。

案例三：清除浮動

當一個元素浮動后，它可能會導致父元素的高度塌陷，從而影響頁面布局。為了解決這個問題，我們可以使用清除浮動的技巧。

下面是一個示例，展示了如何清除浮動：

<style>
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
<br>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="clearfix"></div>

在上述代碼中，我們使用一個偽元素::after清除浮動。通過設置其content屬性為空，display屬性為table以觸發BFC（塊級格式化上下文）并讓之后的內容清除浮動。在最后一個盒子之后插入一個具有clearfix類的空<div>元素，使其占據清除浮動的作用。

<div>來說，層疊懸浮技術在Web開發中起到了重要的作用。通過層疊樣式和浮動元素，我們可以靈活地控制頁面的布局和樣式，實現各種炫酷的效果。然而，應該注意正確使用層疊和浮動，以避免頁面的混亂和布局問題。</div>