資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學什麼是 CSS 中的浮動容器 (Float Containment)？
首先，讓我們在開始本教程之前瞭解浮動容器。浮動容器是一種在 CSS 中用於控制網頁元素佈局的技術。
每當我們為任何 HTML 元素設定“float”屬性時，它都會自動從網頁的原始文件流中移除，但它仍然保留在視口中。因此，開發人員可能會遇到諸如父 div 元素不會根據子 div 元素的尺寸進行擴充套件之類的問題。讓我們透過下面的示例來了解它。
示例
在下面的示例中，我們有一個包含文字和“子”div 元素的“父”div 元素。在這裡，我們沒有為父 div 元素設定寬度。
此外，我們為子 div 元素設定了固定尺寸，並添加了“float: left”CSS 屬性以使其在左側浮動。在輸出中，使用者可以觀察到父 div 沒有根據子 div 元素的高度進行擴充套件，因為它正在浮動。
<html>
<head>
<style>
.parent {
border: 2px dotted blue;
width: 300px;
margin: 5px;
}
.child {
width: 50px;
height: 50px;
float: left;
border: 4px solid green;
background: yellow;
}
</style>
</head>
<body>
<h2>Using the <i> float CSS property </i> to set floating elements</h2>
<div class = "parent">
<p> This is a random text. </p>
<div class = "child"> </div>
</div>
<div class="parent">
<p> This is a random text. </p>
<div class = "child"> </div>
</div>
</body>
</html>
為了解決上述問題，我們可以使用以下技術。
使用 CSS 的 contain 屬性
“contain” CSS 屬性將特定元素及其子元素從文件流中移除，使它們獨立。當我們為任何 HTML 元素設定“float”CSS 屬性時，它會從文件中移除。因此，我們還可以使用“contain”CSS 屬性將父元素從文件流中移除，以修復浮動元素的佈局。
語法
使用者應遵循以下語法來使用“contain”CSS 屬性。
parent {
contain: content
}
在上述語法中，父選擇器選擇我們已為其設定“float”CSS 屬性的特定元素的父元素。
示例
在下面的示例中，我們使用了與第一個示例相同的程式碼。在這裡，我們向“父”div 元素添加了“contain: content”CSS 屬性。
在輸出中，使用者可以觀察到子 div 不再溢位，並且它完美地設定在父 div 元素內。
<html>
<head>
<style>
.parent {
border: 2px dotted pink;
width: 300px;
margin: 5px;
contain: content;
}
.child {
width: 50px;
height: 50px;
float: left;
border: 4px solid blue;
background: red;
}
</style>
</head>
<body>
<h2>Using the <i> contain CSS proeprty with float </i> to set floating elements</h2>
<div class = "parent">
<p> Welcome to the TutorialsPoint!. </p>
<div class = "child"> </div>
</div>
<div class = "parent">
<p> Hi! How are you? </p>
<div class = "child"> </div>
</div>
</body>
</html>
使用 CSS 的 overflow 屬性
CSS 的“overflow”屬性控制特定 HTML 元素的溢位。當我們將“auto”值設定為“overflow”屬性時，當元素的內容開始溢位時，它會使 HTML 元素可滾動。
語法
使用者可以遵循以下語法將“overflow: auto”CSS 屬性用作浮動容器。
selector {
overflow: auto;
}
示例
在下面的示例中，我們建立了“card”div，其中包含“text”和“image”div 元素。我們為 image div 元素設定了“float: left”，為“card”元素設定了“overflow: auto”。
在輸出中，使用者可以觀察到影像完美地適合卡片元素。如果我們刪除“overflow”屬性，它將從 div 元素溢位。
<html>
<head>
<style>
.card {
border: 2px dotted pink;
width: 300px;
margin: 5px;
overflow: auto;
}
.image {float: left;}
</style>
</head>
<body>
<h2>Using the <i> overflow: auto CSS proeprty with float </i> to set floating elements</h2>
<div class = "card">
<div class = "text"> I love nature! </div>
<div class = "image"> <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT58C2HqvIjZnL-UlE0TxpLPf_l6O-h34EhvPABAEk8&s" alt = "image"> </div>
</div>
</script>
</body>
</html>
使用網格佈局模組
我們可以使用 CSS 中的“display: grid”CSS 屬性在網頁上建立網格佈局。在這裡，我們可以為一些 HTML 內容設定“float”CSS 屬性。之後，我們可以使用“display: grid”和“grid-template-columns: 1fr 1fr”CSS 屬性建立兩列。
基本上，它將浮動元素設定在網格佈局中，這有助於開發人員修復網頁佈局。
語法
使用者可以遵循以下語法使用“display: grid”設定浮動元素。
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
在上述語法中，使用者可以透過更改“grid-template-columns”CSS 屬性的值來建立多列。
示例
在下面的示例中，“container”div 元素包含“float-left”和“float-right”div 元素。我們根據它們的類名為 div 元素設定了“float”屬性值。
我們對“container”div 元素使用了“display: grid”CSS 屬性。在輸出中，使用者可以觀察到兩個 div 元素是如何在容器中設定的。一個在左側，另一個在右側。
<html>
<head>
<style>
.container {
width: 400px;
height: 100px;
display: grid;
border: 3px solid green;
grid-template-columns: 1fr 1fr;
font-size: 2rem;
}
.float-left {float: left;}
.float-right {float: right;}
</style>
</head>
<body>
<h2>Using the <i> display: grid CSS property </i> to set floating elements</h2>
<div class = "container">
<div class = "float-left"> This is a Left Column </div>
<div class = "float-right"> This is a Right Column </div>
</div>
</body>
</html>
在本教程中，使用者學習了各種浮動容器技術。在第一種技術中，我們使用了“contain”CSS 屬性。在第二種技術中，我們使用了“overflow”屬性；在第三種技術中，我們使用了“display: grid”CSS 屬性。
瀏覽量：118
