日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

float 屬性將元素浮動在頁面中，與相鄰元素并排顯示，不會影響常規流式布局。float 值為：left（左浮動）、right（右浮動）、none（清除浮動）。浮動元素影響內容溢出、間距和父容器高度。清除浮動的方法包括：清除屬性、浮動元素、overflow: hidden。

CSS 中 float 的用法

float 定義

CSS 中的 float 屬性將元素定位在它的內容盒之外，使其浮動在頁面中。浮動元素不會影響其他元素的常規流式布局，而是與其相鄰的元素并排顯示。

float 值

float 屬性可以接受以下值：

left：將元素浮動到容器的左側。

right：將元素浮動到容器的右側。

none：清除浮動，使元素恢復到正常流式布局。

用法

要浮動元素，請將 float 屬性添加到其樣式中：

<code class="&lt;a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">css"&gt;element {
  float: left;
}</code>

登錄后復制

影響

浮動元素會影響其附近的元素：

內容溢出：浮動元素的內容可能會溢出與其相鄰的元素。

間距：浮動元素和相鄰元素之間可能會出現間距。

父容器高度：如果浮動元素的高度高于父容器，則父容器的高度將自動調整以容納浮動元素。

清除浮動

要清除浮動，可以使用以下方法之一：

清除屬性：將 clear 屬性應用于元素，清除其所有浮動元素。

浮動元素：在浮動元素后面添加一個浮動元素，將浮動元素清除到新的行。

overflow: hidden：將 overflow 屬性應用于父容器，將浮動元素隱藏在容器中。

實例

下面的代碼創建一個帶有兩個浮動元素的容器：

<code class="html"><div class="container">
  <div class="element1">元素 1</div>
  <div class="element2">元素 2</div>
</div></code>

登錄后復制

<code class="css">.container {
  display: flex;
}

.element1 {
  float: left;
  background: red;
  width: 100px;
}

.element2 {
  float: right;
  background: blue;
  width: 100px;
}</code>

登錄后復制

輸出：

<code>元素 1 | 元素 2</code>

登錄后復制