CSS Layout - Float Example

本页提供常见的浮动案例。

网格 / 等宽的框

Box 1
Box 2
Box 1
Box 2
Box 3

通过使用 float 属性，可以轻松地并排浮动内容框：

例

* {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33.33%; /* Takwasan kaiwace da yake (kaiwace da yake 25%, kaiwace da yake 50%, kai sa ran kuma) */
  padding: 50px; /* 如果需要在图片间增加间距 */
}

自分で試してみる

什么是 box-sizing？

您可以轻松地并排创建三个浮动框。但是，当您添加一些内容来扩大每个框的宽度（例如，内边距或边框）时，这个框会损坏。 box-sizing 属性允许我们在框的总宽度（和高度）中包括内边距和边框，确保内边距留在框内而不会破裂。

Za'a iya kaiwa kaiwa kaiwace: CSS Box Sizing Kaiwace da yake a kaiwa kowace kaiyanci game da box-sizing attribute.

Kaiwace da yake kaiwa

Wannan kaiwace (The grid of boxes) za'a yi kaiwa kaiwa kaiwace:

例

.img-container {
  float: left;
  width: 33.33%; /* Takwasan kaiwace da yake (kaiwace da yake 25%, kaiwace da yake 50%, kai sa ran kuma) */
  padding: 5px; /* Idan ba'a ni a kaiwa wata tsaki dake */
}

自分で試してみる

Kaiwace da yake

Na wannan nuna, ka gudan kowace koyi kowace da cikakawa kai. Amma, kafin kai ake cikakawa kaiwa wata da yake da kaiwa da yake, an yi kai tsaya wata a hanyar kai, dake hanyar kai kaiwace:

Box 1

Some content, some content, some content

Box 2

Some content, some content, some content

Some content, some content, some content

Some content, some content, some content

例

.box {
  height: 500px;
}

自分で試してみる

しかし、これにより、エラストシティが失われます。フレックスボックス内に常に同じ量の内容があることを保証できる場合には、これはできます。しかし、多くの場合、内容は異なります。上記の例をスマートフォンで試してみると、第2つのフレックスボックスの内容がフレックスボックスの外に表示されることがわかります。これがCSS3 Flexboxが役立つ場所です - なぜなら、フレックスボックスを自動的に伸ばして最も長いフレックスボックスと同じ長さにすることができます：

例

Flexboxを使用してフレックスボックスを作成します：

Box 1 - これらは、実際に非常に高い内容があることを確認するためのテキストです。これらは、実際に非常に高い内容があることを確認するためのテキストです。これらは、実際に非常に高い内容があることを確認するためのテキストです。これらは、実際に非常に高い内容があることを確認するためのテキストです。これらは、実際に非常に高い内容があることを確認するためのテキストです。
Box 2 - 私の高さはBox 1に従います。

自分で試してみる

Flexboxの唯一の問題は、Internet Explorer 10またはそれ以前のバージョンで動作しないことです。私たちの CSS Flexbox セクションでFlexboxレイアウトモジュールに関する詳細を学びます。

ナビゲーションメニュー

ナビゲーションメニューに float リンクリストと一緒に使用して、水平メニューを作成します：

例

自分で試してみる

Webレイアウトの例

使用 float 属性は、Webレイアウト全体を完了することもよくあります：

例

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}
.column {
  float: left;
  padding: 15px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.menu {
  width: 25%;
}
.content {
  width: 75%;
}

自分で試してみる

もっと例

枠線とマージン付きの画像を段落の右側にフロートさせます。
画像を段落の右側にフロートさせます。画像に枠線とマージンを追加します。
タイトル付きの画像を右側にフロートさせます。
タイトル付きの画像を右にフロートさせます。
段落の最初の文字を左にフロートさせます。
段落の最初の文字を左にフロートさせ、その文字のスタイルを設定します。
フロートでウェブサイトを作成する
フロートを使用して、水平ナビゲーションバー、ヘッダー、フッター、サイドナビゲーションバー、メインコンテンツを持つホームページを作成します。

すべての CSS フロート属性

属性 説明
box-sizing ターミナルの大きさを計算する方法を定義します：それがインセットや枠線を含めるべきかどうか。
clear تعیین کدام عناصر می‌توانند در کنار عنصر شفاف شده قرار گیرند و در کدام سمت شناور شوند.
float تعیین نحوه شناور کردن عنصر.
overflow تعیین نحوه مدیریت وقتی محتوای منطقه‌ی پر شده از محدودیت‌های قابلیت جابجایی خارج می‌شود.
overflow-x تعیین نحوه مدیریت لبه‌های چپ/راست محتوای منطقه‌ی پر شده عناصر پر شده.
overflow-y تعیین نحوه مدیریت لبه‌های بالا/پایین محتوای منطقه‌ی پر شده عناصر پر شده.