1. Home
  2. CSSフロート（浮動）

CSSフロート（浮動）2024 年の最新の入門チュートリアル。このコースでは CSSフロート（フロート）とは何ですか？,どのように浮動要素,例,互いに隣接するフローティング要素,例,クリアフロート - 利用明確,例,より多くの例,すべてのCSSフロートプロパティ, について学習できます。

CSSフロート（浮動）

CSSフロート（フロート）とは何ですか？



CSSフロート（浮動）、要素は、左または右、その周りの要素が再配置されます移動します。

フロート（浮動）、多くの場合、イメージに使用されているが、それはときに同じレイアウトに非常に便利です。

どのように浮動要素

水平浮遊要素は、要素のみを左右に移動することができ、上下に移動できないことを意味します。

浮動要素は、その国境を越えて外側の縁や、これまでのボックスを含む別の浮動ボックスまで左または右に移動しようとします。

浮動要素の後の要素がそれに焦点を当てます。

浮動要素の前の要素が影響を受けることはありません。

画像を右フローティングされている場合は、次のテキストは、それの左側の周りに流れます。

例

img
{
float:right;
}

»をお試しください

互いに隣接するフローティング要素

あなたが一緒にいくつかの浮動要素を入れた場合余地がある場合、それはお互いに隣接します。

ここでは、float型プロパティの画像ギャラリーを使用します。

例

.thumbnail
{
フロート：左;
幅：110px;
高さ：90PX;
マージン：5pxの;
}

»をお試しください

クリアフロート - 利用明確

並び替え要素の周りに浮遊要素の後、これを回避するために、明確なプロパティを使用します。

clear属性は、要素が浮動要素の両側に表示することはできません指定します。

画像ギャラリーを追加するには、clear textプロパティを使用します。

例

.text_line
{
clear:both;
}

»をお試しください

例

より多くの例

左の画像は、段落に境界線と余白や山車を追加します

私たちは左に画像境界と余白と段落のフロートを追加してみましょう

右floatにタイトルと画像

右フロートにタイトルや画像ましょう。

左に段落フロートの最初の文字をしてみましょう

左に段落フロートの最初の文字ようにスタイルを変更します。

テーブルでページを作成しません。

ページヘッダー、フッター、左のコンテンツおよびメインコンテンツを作成するためにフロートを使用してください。

すべてのCSSフロートプロパティ

「CSS」欄が示すCSSの異なるバージョン（CSS1やCSS2）の数は、プロパティを定義します。

属性 描述 值 CSS
clear 指定不允许元素周围有浮动元素。 left
right
both
none
inherit		 1
float 指定一个盒子（元素）是否可以浮动。 left
right
none
inherit		 1

ホットチュートリアル

お問い合わせ

CSSフロート（浮動）
10/30