フロートの使い方は？ css: float の使用法の概要

開発者にとって、Float は頻繁に使用する必要がありますが、それがもたらす苦痛に耐えることがよくあります。しかし、それを制御できるのはほんのわずかだと思います。 CSS float は、左にフローティング (float:left) および右にフローティング (float:right) するラベル オブジェクトと呼ばれるものです。フローティングとは、DIV 要素を標準フローから切り離し、標準フローの上に浮かせることと理解できます。これは、標準フローと同じレベルではありません。この章では、float の使用方法について説明します。

まず、PHP中国語ウェブサイトに関連する無料コースを学ぶことができます

1.《CSSオンラインマニュアル》

のコースを学びます。 《

Float

章

Dark Horse Programmer CSSビデオチュートリアルのfloat関連コンテンツ

あなたの知らないfloatの使い方を詳しく解説

イニシャルfloat のデザイン 本来の目的は、画像とテキストを混合して配置し、テキストが画像を囲むようにすることです。今日の使用法は基本的に水平レイアウトを実現することですが、これは「誤用」ですが、多くの場合、希望する効果が得られます。ほとんどの人は float の使用方法を知っていますが、誰もが float の原理と本来の設計意図を知っているわけではありません。

2.

css float-float/clear 詳細なグラフィックとテキストの説明

p 要素 A が浮動小数点であり、A 要素の前の要素も浮動小数点である場合、A 要素は前の要素に続きます ( Ifこれら 2 つの要素を 1 行に配置することはできません。その場合、A 要素は次の行に押し込まれます)、A 要素の前の要素が標準フロー内の要素である場合、A の相対的な垂直位置は変わりません。つまり、A の上部は常に前の要素の下部と位置合わせされます。

3.

float の正しい使い方、90% の人が間違って使っています

float にはスペースをクリアするという非常に便利な機能もあります。写真は載せませんので、説明だけ載せておきます。たとえば、p に画像を配置すると、デフォルトで画像間に数ピクセルのスペースができます。これはギャップとも呼ばれます。しかし、多くの場合、このギャップやスペースは、現時点では必要なものではありません。画像を文書の流れから切り離すために必要なのは、画像にフロートを与えるだけであり、画像は完全に結合されます。

4.

CSSで複数のdivのfloatの高さを調整する2つの方法

3カラムまたは2カラムのレイアウトでDiv + CSSを使用する場合、2つのカラム（または3つのカラム）の高さを同じにするには、 use Table 実装は簡単ですが、Div + CSSを使うと面倒です。一般的には、背景画像の塗りつぶしやJSスクリプトを使って高さを揃えることがほとんどです。

5.

CSS における float float の詳細な説明

a.float の起源 float の本来の設計は、テキストの折り返し効果を作成することであり、これはデザイナーが私たちに望んでいることです。

b.float パラメータ

float 属性には 3 つのパラメータ値があります:

Left: 要素が左側に浮動することを示します。

right: 要素が右に移動することを示します。

none: オブジェクトはフローティングせず、標準のドキュメント フローに従います。

c. 効果の表示 (float: left を例に挙げます。float: right の場合は位置が違うだけです)

6.

CSS の基礎知識での float の詳細な紹介

Float には 4 つの属性があります: left (左フロート) 、右 (右フローティング)、なし (フローティングではない)、継承 (継承)。 float 要素を含むブロックは、その最も近いブロックレベルの祖先です。

フローティング要素は、その外側の境界が「包含ブロックの内側の境界」または「別のフローティング要素の外側の境界」に触れるまで、左（または右）にオフセットされます。

関連する質問と回答

1.float要素が落ちる問題の解決方法

2.HTMLでfloat属性を使用すると親要素の高さが0になってしまう、その方法解決しますか？

3. フロートはどのような状況で失敗しますか?

【関連おすすめ】

1. PHP中国語Webサイト無料チュートリアル: 「CSS 0基本入門チュートリアル」

2. PHP中国語Webサイト無料ビデオチュートリアル: 「php.cn Dugu Jiijian (2) - cssビデオ」チュートリアル》

以上がフロートの使い方は？ css: float の使用法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。