ホームページ > 記事 > ウェブフロントエンド > フローティング art_html/css_WEB-ITnose
フローティング art_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:17:13987ブラウズ
要約: Float は CSS で理解するのが難しいスタイルです。HTML ページのレイアウトの重要な部分として、もう 1 つの部分が位置決めです (これまでは float よりも理解しやすいかもしれません)。 、しかし、それを好きに使うことはできませんし、float によって引き起こされる問題をうまく説明することはできません。最近、float の理論を徹底的に研究し、この記事を書きました。フローティングの問題の原因は次のとおりです。 float の使用
この記事では、解析に「Firfox」の 3D 効果を組み合わせます。同時に、エンコードには Edit-plus を使用します。1 浮動float プロパティ
(1) 有代码有真実：看下面基準代码
<!doctype html><br /><br /><html l ang="en">
<head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="andy"> <meta name="Keywords" content="float"> <meta name="Description" content="坚持"> <title>float测试</title> <style> body,html,div{padding:0pc;margin:0px;} .box1{width:100px;height:100px;border:2px solid red;} .box2{width:140px;height:80px; border:2px solid yellow;} </style> </head> <body><br /> <div class="box1">box1</div> <div class="box2">box2</div> </body></html> 运行結果: 思识放小（下面同理）
分析：これと我们想的おそらく同じでしょう。
(2) 次に、コンソール .box1{float:left} .box2{float:left;} を使用して、繰り返さずに元のベースで追加します
実行結果は次のとおりです。次に、(3D) 実行結果を 3 次元の視点から見てみましょう
注: Firefox で右クリック -> [要素の検索] -> [設定 (アイコン)] -> ;利用可能なツール ボックス ボタンの下で -> 3D ビューにチェックを入れると、ツールバーに次のようなアイコンが表示されます: これは 3D ビュー (Firefox 固有) を使用するためのボタンです。実行後、次のことがわかります。
分析: この効果を見ていない人もいるかもしれません。左側の領域が HTML 領域であることがわかります。box1 box2。真ん中（ギャップ）にあるもの：それはボディ部分です（ここでは、ボディのbox1とbox2がフローティングしているため、ボディにはコンテンツがありません。おそらくFirefoxがボディをカスタマイズして非表示にしている可能性があります）
以下主要なコンテンツの始まり
(3)float 何が起こっているのでしょうか? または、上記のベンチマーク コード (ベンチマーク コードであることに注意してください): .box2{float:left;} box2 を float にして実行します。
分析: 以下のボックス 1 を参照してください。もう 1 つのレイヤーがあります。明らかに、これはボディです。これを見ると、主に 1 つの詳細が説明されます。非浮動ボックス 1 と浮動ボックス 2 は同じ高さです。浮動による高さの不一致はありません。 (この詳細を過小評価しないでください)実験: 次は「ベース コード」です。box1{float:left;} box2 は浮動していません: 平面の結果と 3D 効果は次のとおりです:
分析: 境界線を使用します。より良い分析; 2 つの図を組み合わせる この図から、ボックス 1 がボックス 2 の上にあることがわかります。ボックス 1 は浮いていて、ボックス 2 はボックス 1 の下に表示されています。これは何を意味しますか?つまり、フローティング ボックスの場合、その底部は空です。-----box1 は平面図に似ており、空間に浮かんでいます。box2 は浮遊ではなく 3 次元であり、特定の 3D 空間を占めます。 ;
このため、私たちは重要な結論を導き出します: いわゆるフロートは、実際には「フローティング オブジェクトがドキュメント フローから抜け出し」、平面空間に入ります。これは専門的すぎて言うことができません。簡単に言うと、次のようになります。浮遊オブジェクトは 3 次元空間ではなく、平面であるため、下に空間が存在します。つまり、これが Float の下に「エンティティ」があることを説明しました。 ps: 理解するのは難しいようですが、これは本当です
もう 1 つの重要な結論があります。最初の写真をよく見てください。一般的に、box2 という単語が右側にあることがわかります。左上隅にあるはずです。理由: 上のフロート ボックス 1 によって「絞り出されて」います。これもバグです。
ps: この実験を通じて、float が何であるかを知りました。
(4) 浮動小数点数を使用した要素間の影響
# ボックスが 1 つしかない場合、以下のベンチマーク コードを参照してください ps: スペースを節約するために、メイン コード ブロックのみを記述します
<style> body,html,div{padding:0pc;margin:0px;} .box1{width:100px;height:100px;border:2px solid red;float:left;} </style> <body> <div class="box1">box1</div><br /> </body> </html>
分析: box1 は float:left を使用します。ボックスは自然に浮動します。float:right の場合は、ボディの右側になります。
結論: 前に他の要素がない場合。ボックスの場合、その浮動位置はその親クラスを参照します
<style> body,html,div{padding:0pc;margin:0px;} .box1{width:100px;height:100px;border:2px solid red;} .box2{width:100px;height:100px;border:2px solid red;} </style> <body> <div class="box1">box1</div> <div class="box2">box2</div> </body> </html> 実験 2 .box1{float:left;} .box2{float:left を追加します。 ;} 実行:
結論: box2 ボックスの前に box1 ボックスもあります。box2 は box1 と同じ行に影響を与えます。ここで浮動すると、ボックス 2 は浮動せず、引き続きボックス 1 の下に表示されます。 簡単な実験を行ってみてください。
2 浮動浮動小数点をクリアします。
(1)怎么清除浮动float？
answer: 使用 clear属性；
(2)理解清除float
对于清除浮动造成误解：就是清除 float：left ,其实不是这样的; 所谓清除float不是清除他的浮动样式，而是浮动对象.比如：
clear:left 是指不允许左边有浮动对象，而不是清除浮动样式;为了更好的的理解其中的含义,下面做实验3:
基准代码：
<style> body,html,div{padding:0pc;margin:0px;} .box1{width:100px;height:100px;border:2px solid red;float:left} .box2{width:140px;height:80px; border:2px solid yellow;float:left;} </style> <body> <div class="box1">box1</div> <div class ="box2">box2</div> </body> </html> 运行结果：平面和立体图;
其他不变, 修改 box2{clear：left;}后 结果是这样的：
分析比较：修改之后box2会换行显示，同时注意box2还是浮动的。所以验证了： clear:left 是指不允许左边有浮动对象，而不是清除浮动样式; 这是非常重要的一点.
clear属性的其他取值：
clear:none 默认，允许两边左右浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象
both：不允许有浮动对象
(3) clear自作用于自己本身
实验4:
在上面（2）的基准代码中加上 box1{clear:right;} 运行结果：
分析：可以有人会问：box1不是不允许右边有浮动对象吗,结果看上去好像是clear没有执行？ 其实在这里结果是完全符合要求的. 解释下： 首先注意文档流是从上到下解释的, 解释box1盒子样式 clear：left时; 不允许自己右边有浮动对象, 结果这句话运行了,此时位置中确实是没有. 但是到了box2{float：left;}因为box1还是float的，自然box2也要上去. 所以就是这样结果. 我们试想：假如现在有个盒子3 box3{float：left；clear：left;} 意思box3你的左边不可以有对象,那么box3也要自己下来。 实验4说明了：clear是作用在自己本身，而不是其他对象; 简单的说就是：你不允许别人在你的旁边,那你自己跑,而不是让别人跑. 这个知识点是有点难理解。
3 综合分析一个案例
实验5---代码：
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>float</title> <meta name="Keywords" content="web前端" /> <meta name="Description" content="" /> <!--base,link,style,script--> <style type="text/css"> html,body,div{margin:0px;padding:0px;} .box1{width:200px;height:240px;border:5px solid #669966; } .box2{width:90px;height:150px;border:5px solid #ff9933; float:left;} .box3{width:260px;height:60px;border:5px solid #cc99ff; } .box4{width:230px;height:90px;border:5px solid #662266; float:left;} </style> </style> </style> </style> </head> <!--网页身体区域--> <body> <div class="box1"></div> <div class="box2"></div> <!--清除浮动--> <div style="">1111</div> <div class="box3"></div> <div class="box4"></div> <div style="clear:both;"></div> </body></html>
运行结果：
分析：盒子1不浮动, 盒子2浮动，那么盒子2（橙色）不会上去,还是换行显示. 到了"1111"盒子不浮动,那么就自然是放在盒子2的下面空间处，1111字样被挤出来. 接下来是盒子3，因为前面的盒子"111"不浮动,那么只能换行接着显示（浅紫色）. 接下来 盒子4,因为自己浮动而盒子3不浮动，所以自己换行浮动,仔细看图，盒子4（深紫色）左边是盒子2的边框(橙色), 盒子2也是float的,自然这行左边的位置被霸占,盒子4只能靠边. 这样看来就容易理解多了.
现在清除浮动：上面代码中在1111盒子的style出加上"clear:left"；结果是这样的：
结果自己试着分析，不难理解；
注："浮动的艺术下"：解释了float会导致的一些问题和解决方法.