ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS基礎学習18：CSSレイアウト float_html/css_WEB-ITnose
CSS基礎学習18：CSSレイアウト float_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:32:46863ブラウズ
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 がビューから消えます。
最初の要素が右にフローティングするようにコードを書き換えます:
#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> 看一下效果：