|
float 属性の値を親要素から継承することを指定します。 |
|
3. フローティングの役割は何ですか?
機能: HTML 文書の流れでは、行要素、ブロック要素、インライン ブロック要素に分割されます。
行要素とインライン ブロック要素は横に配置され、ブロックは要素はフローの形で上から下に配置されますが、ブロック要素を水平に配置したい場合は、float を使用します。
float がブロック レベルの要素に追加されると、次の図に示すように、垂直に配置されるべき要素が水平に配置され始めます。
##css div フローティング他のアプリケーション ケース
DIV CSS 実験 1
Css スタイルのサンプル コンテンツ。テキストと画像を固定幅の div レイヤーに配置し、背景を青色にします。テキストコンテンツは右側に、小さな画像は左側にあります。
www.divcss5.com CSS ケースのデモの最終的なレンダリングは次のとおりです
1. まず、最も外側のレイヤーの幅を次のように設定します。 300px、高さを 200px ボックスという名前の CSS セレクター コードは次のとおりです (ナレッジ ポイント px の意味) .box {border: 1px solid #666;height: 700px;width: 700px;color: #fff;}
.box1 {float: left; width: 100px; height: 100px; background: #000;}
.box2 {float: left; width: 100px; height: 100px; background: red; }
.box3 {width: 200px; float: left; height: 200px; background: yellow; }
.box4 {width: 300px; float: left; height: 300px; background: blue; }
.box5 {float: left; width: 300px; height: 400px; background: green;}
<p class="box"> <p class="box1"> box1 </p> <p class="box2"> box2 </p> <p class="box3"> box3 </p> <p class="box4"> box4 </p> <p class="box5"> box5 </p> </p>
2. ボックス内のテキスト コンテンツ部分の CSS スタイルを yangshi に設定し、背景を に設定します。青、幅を 120px、右側にフロートします .box{width:300px; height:200px;}3. 画像の CSS スタイルを左側の div
.yangshi{ width:120px; float:right; background:#0066FF;}4 にフロートに設定します。本文内の div レイアウト、コードは次のとおりです
img { float: left;} 説明: ここに img タグがあります。これは外部画像へのリンクであり、画像名はdemo.gifです。
最終的なデモ結果のスクリーンショット
CSS 実験 2
次に、div CSS の使用方法を説明します。ここでは小さな画像を右側に配置できます (前の例は左側にありました)。青色の背景のテキスト コンテンツ領域は左側にあります (前の例は右側) (拡張 CSS 中央)。ここでは、yangshi の float:right; を float:left に変更し、画像の CSS スタイル img { float: left;} を img { float: right;} に変更するだけです。 
CSS コードは次のとおりです。 <div class="box">
<div class="yangshi">我是www.divcss5.com 网站，测试内容</div>
<img src="demo.gif" / alt="float属性を使ってdivの左右のフローティングを制御するCSSの詳細解説" >
</div>
css コードと html のコンテンツは変更されません。
最終的なデモ結果のスクリーンショットは次のとおりです。
上記のとおりであることを願っています2 つの CSS 例は、 float を理解するのに役立ちます。ぜひ皆さんも実践してみてください！ css フローティングの概要
テキスト コンテンツの左スタイル (text-align:left) と右スタイル (text-align:right) を区別する必要があります。フローティングは HTML の場合にのみ左に設定されます。タグ。右のフロート スタイル。 float スタイルには中央揃え (フローティング中央揃え) スタイルがありません。ラベル オブジェクトを中央揃えにする必要がある場合は、CSS レイアウトの中央揃えに関する本文 (CSS マージン) で詳しく説明します。ここで、右にフローティングする場合は float:right を使用し、左にフローティングする場合は float:left を使用することを忘れないでください。
(学習ビデオ共有:
css ビデオ チュートリアル、
html ビデオ チュートリアル)
