CSS基礎学習18：CSSレイアウト float_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS基礎学習18：CSSレイアウト float_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:32 AM

CSS レイアウトでの配置に関して言えば、フローティングボックスは、その外端が含まれるボックスまたは別のフローティング

ボックスの境界線に触れるまで、左右に移動できます。フローティングボックスはドキュメントの通常のフローにないため、ドキュメントの通常のフロー内のブロックボックスは、フローティングボックスが存在しないかのように動作します。

right float right、breakaway ドキュメントフロー

Inherit は、float 属性の値が親要素から継承されることを指定します。

float 属性は、要素が浮動する方向を定義します。以前は、このプロパティは常に画像に適用され、テキストが画像の周りを回り込むようにしていましたが、CSS では、任意の

要素をフローティングにすることができます。フロート要素は、要素のタイプに関係なく、ブロックレベルのボックスを作成します。置換されていない浮動要素の場合は、明示的に

幅を指定します。それ以外の場合は、可能な限り狭くなります。行上に浮動要素用のスペースがほとんどない場合、要素は次の行にジャンプし、特定の行に十分なスペースができるまでこのプロセスが続きます。

要素のフローティングを理解するために、イラストと例を使用します。

(1) 3 つの非フローティング要素の図と効果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS布局之漂浮</title><style type="text/css">#test {border:#FF00FF solid 1px;width:700px;height:400px;margin:auto;}#div_1 {background-color:#00FF00;width:200px;height:100px;}#div_2 {background-color:#FFFF00;width:200px;height:100px;}#div_3 {background-color:#FF0000;width:200px;height:100px;}</style></head><body><div id="test">	<div id="div_1">区域1</div>	<div id="div_2">区域2</div>	<div id="div_3">区域3</div></div></body></html>

ログイン後にコピー

要素がフローティングに設定されていない場合、 div 要素はブロックレベルの要素であるということです。3 つの要素が要素の隣に配置されるのではなく、要素の下に順番に配置されていることがわかります。

using using use through through ’ s ‐ off ‐‐ ‐‐‐‐ off を左に移動し、その左端がの左端に触れるまで左に移動します。入っている箱。これはドキュメント

フロー内に存在しなくなったため、スペースをとらず、実際に要素 2 を覆い、要素 2 がビューから消えます。

(3) 右にフローティングする最初の要素のアイコンと効果:

最初の要素が右にフローティングするようにコードを書き換えます:

#div_1 {background-color:#00FF00;width:200px;height:100px;float:left;}

ログイン後にコピー

要素 1 が右にフローティングされると、それははドキュメントフローの外に出て、その右端が格納されているボックスの右端に触れるまで右に移動します。

(4) 3 つの要素すべてが左にフロートするアイコンとエフェクトを設定します:

3 つの要素すべてが左にフロートするようにコードを書き換えます:

#div_1 {background-color:#00FF00;width:200px;height:100px;float:right;}

ログイン後にコピー

3 つのボックスすべてが左に移動すると、ボックス 1 はそれを含むボックスに当たるまで左にフロートし、他の 2 つのボックスは前のフローティングボックスに当たるまで左にフロートします。

(5) 含まれているボックスが狭すぎて、水平に配置された 3 つの浮遊要素を収容できない場合は、十分なスペースができるまで他の浮遊ブロックが下に移動します:

#div_1 {background-color:#00FF00;width:200px;height:100px;float:left;}#div_2 {background-color:#FFFF00;width:200px;height:100px;float:left;}#div_3 {background-color:#FF0000;width:200px;height:100px;float:left;}

ログイン後にコピー

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

最初の要素の高さを書き換えるコード:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS布局之漂浮</title><style type="text/css">#test {border:#FF00FF solid 1px;width:500px;height:400px;margin:auto;}#div_1 {background-color:#00FF00;width:200px;height:100px;float:left;}#div_2 {background-color:#FFFF00;width:200px;height:100px;float:left;}#div_3 {background-color:#FF0000;width:200px;height:100px;float:left;}</style></head><body><div id="test">	<div id="div_1">区域1</div>	<div id="div_2">区域2</div>	<div id="div_3">区域3</div></div></body></html>

ログイン後にコピー

次に、2 番目の要素で確認します。インスタンスフローティング要素がドキュメントフロー領域をブロックしているため、要素 2 の内容を確認するにはどうすればよいでしょうか?次に

この問題を解決します。clear 属性を使用します。属性クリア属性

フローティングクレンジングの定義と使用法

では、他の浮動要素がその要素を指定することはできません。 CSS1 と CSS2 では、これはクリア要素 (つまり、

clear プロパティが設定された要素) に上部マージンを自動的に追加することで実現されました。 CSS2.1では要素の上マージンの上にクリアスペースが追加されますが、マージン自体は変わりません。変更に関係なく、最終結果は同じです。左クリアまたは右クリアとして宣言されている場合、要素の上境界線は、その側のフローティング要素

の下マージン境界のすぐ下になります。

可能な値

Left では、左側の浮動要素は許可されません。 T h Right では、右側のフローティング要素は許可されません。

左側と右側では両方の浮動要素を使用することはできません。

なしデフォルト値。フロート要素を両側に表示できるようにします。

inherit 规定应该从父元素继承 clear 属性的值。

我们用图示和实例来理解元素的清除浮动：

实例：先回过头来看实例(2)的效果，我们设置第二个元素有清除浮动元素属性：

#div_2 {background-color:#FFFF00;width:200px;height:100px;clear:left;}

ログイン後にコピー

三浮动和清除浮动的结合

我们先来看个例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS布局</title><style type="text/css">#test {margin:auto;}#div_1 {background-color:#00FF00;width:200px;height:100px;float:left;}#div_2 {background-color:#FFFF00;width:200px;height:100px;float:left;}#div_3 {background-color:#FF0000;width:200px;height:100px;float:left;}</style></head><body><div>欢迎访问某某网站</div><div id="test">	<div id="div_1">区域1</div>	<div id="div_2">区域2</div>	<div id="div_3">区域3</div></div><div>这是一些文本内容</div></body></html>

ログイン後にコピー

我们从结果中看出浮动的元素并没有融入到我们编辑的整个文档流中，从布局来看，文本内容应该紧接着区域块

的内容向下另起一行排列，但是并没有达到预期的效果。

如何让浮动元素融入到整个文档流布局中？

结合实际我们找到了一个可行的方法，在浮动元素的区域块中再添加一个div，设置这个div为清除浮动属性，这

样浮动元素就真实存在文档流中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS布局</title><style type="text/css">#test {margin:auto;}#div_1 {background-color:#00FF00;width:200px;height:100px;float:left;}#div_2 {background-color:#FFFF00;width:200px;height:100px;float:left;}#div_3 {background-color:#FF0000;width:200px;height:100px;float:left;}#clear {clear:both;}</style></head><body><div>欢迎访问某某网站</div><div id="test">	<div id="div_1">区域1</div>	<div id="div_2">区域2</div>	<div id="div_3">区域3</div>	<div id="clear"></div></div><div>这是一些文本内容</div></body></html>

ログイン後にコピー

看一下效果：

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。