フローティング 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 >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 までご連絡ください。

公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、