Latest web development tutorials
×

CSS コース

CSS コース CSS 簡単な紹介 CSS 文法 CSS Id と Class セレクタ CSS 作ります CSS 背景(background) CSS テキスト(text) CSS フォント(Fonts) CSS リンク(link) CSS リストスタイル(ul) CSS テーブル(table) CSS ボックスモデル CSS フレーム(border) CSS 輪郭(outline) CSS マージン(margin) CSS 充填(padding) CSS グループ化とネスト CSS サイズ(Dimension) CSS ディスプレイ(display) CSS 検索します(position) CSS フロート(float) CSS 整列します(align) CSS セレクタの組み合わせ CSS 擬似クラス CSS 擬似要素 CSS ナビゲーションバー CSS ドロップダウンメニュー CSS イメージギャラリー CSS 透視画像/不透明な CSS 画像モザイク技術 CSS メディアタイプ CSS 属性セレクタ CSS サマリー CSS 例

CSS3 コース

CSS3 コース CSS3 簡単な紹介 CSS3 フレーム(border) CSS3 背景 CSS3 段階的変化 CSS3 テキストエフェクト CSS3 フォント CSS3 2D 変更 CSS3 3D 変更 CSS3 トランジション CSS3 アニメーション CSS3 マルチカラム CSS3 ユーザーインターフェース

CSS レスポンシブデザイン

Viewport グリッドビュー メディアクエリ ビデオ(video) フレーム

CSS リファレンスマニュアル

CSS リファレンスマニュアル CSS セレクタ CSS スピーチリファレンス CSS Web セーフフォント CSS アニメーション CSS ユニット CSS カラー CSS カラー値 CSS 色名 CSS 16進数の色

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