2016.3.14CSSフローティング5日目_html/css_WEB-ITnose

今日のレッスンの概要

フローティング ボックスは、その外縁が収容ボックスまたは別のフローティング ボックスの境界線に触れるまで、左右に移動できます。

フローティング ボックスはドキュメントの通常のフローにないため、ドキュメントの通常のフロー内のブロック ボックスは、フローティング ボックスが存在しないかのように動作します。

CSS Floating Principle の紹介

下の図を見てください。ボックス 1 が右にフローティングされている場合、ボックス 1 はドキュメント フローから外れ、その右端が含まれているボックスの右端に接触するまで右に移動します。

CSS フローティングの例 - 要素が右にフローティングされています

下の図をもう一度見てください。ボックス 1 が左にフローティングすると、ドキュメント フローから切り離され、左端が左に触れるまで左に移動します。入っている箱の端。

これはドキュメント フローに含まれないため、スペースをとらず、実際にボックス 2 を覆い、ボックス 2 が表示されなくなります。

3 つのボックスすべてが左に移動された場合、ボックス 1 は、それが含まれているボックスに当たるまで左に浮き、他の 2 つのボックスは、前の浮いているボックスに当たるまで左に浮きます。

CSS フローティングの例 - 左側にフローティングする要素

下の図に示すように、含まれているボックスが狭すぎて水平に配置された 3 つのフローティング要素を収容できない場合は、十分な数が確保されるまで他のフローティング ブロックが下に移動します。空間 。

フロート要素の高さが異なる場合、下に移動するときに他のフロート要素によって「スタック」される可能性があります:

CSS float プロパティ

CSS では、float プロパティを通じて要素をフロートさせます。

float 属性は、要素が浮動する方向を定義します。

以前は、テキストが画像を囲むようにこのプロパティが常に画像に適用されていましたが、CSS では任意の要素をフロート表示できます。

フローティング要素は、要素の種類に関係なく、ブロックレベルのボックスを生成します。

非置換要素を浮動させる場合は、明示的な幅を指定します。それ以外の場合は、可能な限り狭くなります。

注: 行上に浮動要素用のスペースがほとんどない場合、要素は次の行にジャンプし、特定の行に十分なスペースができるまでこのプロセスが続きます。

値 説明

left	要素は左に移動します。
right	要素は右にフローティングします。
なし	デフォルト値。要素はフロート表示されず、テキスト内のどこにでも表示されます。
inherit	float 属性の値を親要素から継承することを指定します。

ライン ボックスとクリーンアップ

フローティング ボックスのためのスペースを確保するために、フローティング ボックスの隣のライン ボックスが短くなり、ライン ボックスがフローティング ボックスを囲みます。

そのため、フローティング ボックスを作成すると、テキストを画像の周りに折り返すことができます:

ライン ボックスがフローティング ボックスの周りに折り返される

ライン ボックスがフローティング ボックスの周りに折り返されないようにするには、clear 属性を適用する必要があります。箱に。

clear 属性の値は、左、右、両方、またはなしのいずれかで、ボックスのどの辺がフローティング ボックスの隣にあってはいけないかを示します。

この効果を実現するには、要素の上端がフローティング ボックスの下に垂直に落ちるように、クリアされた要素の上マージンに十分なスペースを追加します。

clear 属性

Clear 属性は、要素のどちら側を指定します。他の浮動要素はサイドに許可されません。

clear 属性は、要素のどの側にフローティング要素を含めることが許可されないかを定義します。

CSS1 と CSS2 では、これはクリア要素 (つまり、クリア属性が設定された要素) に上部マージンを自動的に追加することによって実現されます。

CSS2.1では要素の上マージンの上にクリアスペースが追加されますが、マージン自体は変わりません。

どちらの変更が行われても、最終結果は同じです。 left または right Clear として宣言されている場合、

は、その側のフローティング要素の下マージンのすぐ下に要素の上境界線を作成します。

値の説明 left 左側では浮動要素は許可されません。 right 右側ではフローティング要素は許可されません。 両方 フローティング要素は左側と右側では許可されません。 なしデフォルト値。フロート要素を両側に表示できるようにします。 inherit Clear 属性の値を親要素から継承することを指定します。

clear プロパティの例 - ライン ボックスにクリアを適用する

これは、フロート要素のためのスペースを周囲の要素に残すことができる便利なツールです。

フロートとクリーンアップをさらに詳しく見てみましょう。

画像をテキスト ブロックの左側にフローティングさせ、その画像とテキストを背景色と境界線を持つ別の要素に含めたいとします。

次のコードを書くかもしれません:

.news {  background-color: gray;  border: solid 1px black;  }.news img {  float: left;  }.news p {  float: right;  }<div class="news">    <img  src="/static/imghwm/default1.png" data-src="news-pic.jpg" class="lazy" alt="2016.3.14CSSフローティング5日目_html/css_WEB-ITnose" >    <p>some text</p>
</div>

この場合、問題が発生します。フローティング要素はドキュメント フローの外にあるため、画像とテキストを囲む div はスペースを占有しません。

周囲の要素が浮動要素を視覚的に囲むようにするにはどうすればよいですか? Clear はこの要素のどこかに適用する必要があります:

clear 属性インスタンス - clean を空の要素に適用します

残念なことに、clean を適用できる既存の要素がないため、新しい問題が発生します。空の要素を追加して削除します。
.news {
background-color: grey;
border: plain 1px black;
}

.news img {  float: left;  }.news p {  float: right;  }.clear {  clear: both;  }<div class="news">    <img  src="/static/imghwm/default1.png" data-src="news-pic.jpg" class="lazy" alt="2016.3.14CSSフローティング5日目_html/css_WEB-ITnose" >    <p>some text</p>    <div class="clear"></div>
</div>

これで目的の効果を実現できますが、追加のコードを追加する必要があります。

クリアできる要素も多々ありますが、レイアウト上意味のないタグを追加しなければならない場合もあります。

しかし、コンテナ div をフローティングにする別の方法もあります。

.news {  background-color: gray;  border: solid 1px black;  float: left;  }.news img {  float: left;  }.news p {  float: right;  }<div class="news">    <img  src="/static/imghwm/default1.png" data-src="news-pic.jpg" class="lazy" alt="2016.3.14CSSフローティング5日目_html/css_WEB-ITnose" >    <p>some text</p>
</div>

これで、必要な効果が得られます。

残念ながら、次の要素はこの浮動要素の影響を受けます。

この問題を解決するために、レイアウト内のすべてをフローティングし、適切な意味のある要素 (多くの場合、サイトのフッター) を使用してこれらのフロートをクリーンアップすることを選択する人もいます。

これは、不要なマーキングを削減または削除するのに役立ちます。

実際、W3School サイトのすべてのページでこのテクノロジーが使用されています。使用している CSS ファイルを開くと、

フッター div がクリーンアップされ、フッターの上にある 3 つの div がすべてフロートされていることがわかります。左。

overflow プロパティ

overflow プロパティは、コンテンツが要素のボックスからオーバーフローしたときに何が起こるかを指定します。

この属性は、要素のコンテンツ領域をオーバーフローするコンテンツがどのように処理されるかを定義します。

値がスクロールの場合、ユーザー エージェントは必要かどうかに関係なくスクロール メカニズムを提供します。

そのため、すべてのコンテンツが要素ボックス内に収まる場合でも、スクロールバーが表示される可能性があります。

値の説明

visible	デフォルト値。コンテンツはトリミングされず、要素ボックスの外側にレンダリングされます。
hidden	コンテンツはトリミングされ、残りのコンテンツは非表示になります。
スクロール	コンテンツはトリミングされますが、ブラウザーには残りのコンテンツを表示するためのスクロール バーが表示されます。
auto	コンテンツがトリミングされると、ブラウザーには残りのコンテンツを表示するためのスクロール バーが表示されます。
inherit	オーバーフロー属性の値を親要素から継承することを指定します。

例:

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>浮动</title>        <style media="screen"> .content { overflow: hidden; } .div1, .div2, .div3 { width: 200px; height: 200px; background-color: cyan; /*向右浮动*/ float: right; } p { background-color: green; /*清除浮动*/ /*clear: both;*/ } </style>    </head>    <body>        <div class="content">            <div class="div1">div1</div>            <div class="div2">div2</div>            <div class="div3">div3</div>        </div>        <p>p1</p>    </body></html>

クリアフロート:

クリアされていないフロート:

授業演習

ページは下の図のようにレイアウトされており、制限時間は 20 分です:

Exerシスの答え: (直接フォローすることはお勧めしません。ノック、まず自分で試してみることをお勧めします)

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>练习</title>        <style media="screen"> div { font-size: 50px; text-align: center; line-height: 100px; } .top { background-color: cyan; } .top div { float: left; width: 100px; height: 100px; background-color: green; } .middle { clear: both; } .middle .left { float: left; } .middle .right { float: left; } .div6 { width: 300px; height: 100px; background-color: yellow; } .left_middle { width: 300px; /*height: 100px;*/ } .div8 { float: left; width: 150px; height: 150px; background-color: gray; } .div9 { background-color: black; color: white; width: 150px; height: 150px; float: right; } .div11 { clear: both; background-color: red; width: 300px; height: 100px; } .div7 { width: 200px; height: 200px; background-color: rgb(89, 210, 218); } .div10 { width: 200px; height: 150px; background: cyan; } .div8, .div9, .div10 { line-height: 150px; } .div12 { clear: both; width: 500px; height: 100px; background-color: blue; } </style>    </head>    <body>            <div class="top">                <div class="div1">1</div>                <div class="div2">2</div>                <div class="div3">3</div>                <div class="div4">4</div>                <div class="div5">5</div>            </div>            <div class="middle">                <div class="left">                    <div class="div6">6</div>                    <div class="left_middle">                        <div class="div8">8</div>                        <div class="div9">9</div>                    </div>                    <div class="div11">11</div>                </div>                <div class="right">                    <div class="div7">7</div>                    <div class="div10">10</div>                </div>            </div>            <div class="div12">12</div>    </body></html>

まとめ

Floating element:

1.浮动元素不占父级宽高2.浮动元素都在一行内显示3.浮动元素都可以设置宽高和margin/padding4.浮动元素默认内容撑开宽高5.可以去除浏览器的默认缝隙6.浮动元素标签会发生层叠，但是内容不会

Clear float:

1.clear:both;清除的前一个浮动元素造成的影响，弊端会增加一个元素2.overflow:hidden; 加给浮动元素的父级ps:如果要兼容ie6/7的话要加zoom:1haslayout