フローティング art_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

フローティング art_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:17 AM

要約: 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&reg;">  <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会导致的一些问题和解决方法.

このウェブサイトの声明

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