css-floating詳細説明(1)_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ブログパークに登録してから時間が経ちましたが、いつも他の専門家のブログを読んでいて、とても勉強になり、頑張っていきたいと思うものばかりです。私もフロントエンド業界に参入したばかりの社会人ですが、フロントエンド業界の先輩方にアドバイスをいただければ幸いです。

私のブログの目的は、第一に、私が学んだ技術や知識を要約し、知識の要点や原則を体系的に整理し、第二に、学びと交流の姿勢を表現することです。皆さんがもっと私を監督してくれることを願っています。あなたの言ったことに何か間違っているところがあれば、指摘してください。今は、より自分に合った、より良い仕事を探しています。ははは！

私はブログを書くのは初めてです。私は長い間 CSS に触れてきて、HTML+CSS ページの開発で多くのプロジェクトの経験がありますが、フロートの原理をまだ理解していないことがあります。今日は体系的に説明します。関連する知識が披露されます。

float を理解する前に、ドキュメントフローとは何かを簡単に理解しましょう。

ドキュメントフロー:

ドキュメントフローは、配置内のドキュメント内で表示可能なオブジェクトが占める位置です。平たく言えば、フォームを上から下に行に分割し、各行の要素を左から右に配置することをドキュメントフローと呼びます。たとえば、Web ページの div タグのデフォルトの幅は全行であり、div タグと p タグはブロックオブジェクトであるため、p タグのデフォルトの幅も全行です。 Web ページ内のほとんどのオブジェクトはデフォルトでドキュメントフローを占有しますが、フォーム内の非表示フィールドなど、一部のオブジェクトはドキュメントフローを占有しません。

float の定義:

float 属性は、要素がどの方向に浮動するかを定義します。歴史的に、このプロパティは常に画像に適用され、テキストが画像の周りを回り込むようにしていましたが、CSS では任意の要素をフローティングにすることができます。フローティング要素は、要素のタイプに関係なく、ブロックレベルのボックスを作成します。

フローティングボックスは、その外端が収容ボックスまたは別のフローティングボックスの境界線に触れるまで、左右に移動できます。

フローティングボックスはドキュメントの通常のフローにないため、ドキュメントの通常のフロー内のブロックボックスは、フローティングボックスが存在しないかのように動作します。 ――『w3c』、平たく言えば浮遊要素が浮遊する普通の流れですね。

CSS のすべての float 属性

プロパティ説明値 CSS clearrightfloat右

CSS の float 機能 (簡潔にまとめました):

1: ブロック要素を 1 行で表示します。

2: インライン要素の幅と高さをサポートします。

3: 幅が設定されていない場合、幅は内容によって決まります開く;

4: ドキュメントフローから離脱します

5: レベルを半分に上げます

以下は float の詳細な内訳です:

demo1:要素の設定 float:left

rrree

出力結果:

demo2: 要素の設定 float:right

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>css_float</title>    </head>    <style type="text/css">        body{            margin:0;            font-family: "微软雅黑";            font-size: 20px;        }        #wrap{            margin: 0 auto;            width: 800px;            border: 2px dashed black;            height: 600px;        }        .div1,.div2,span{            float: left;        }        .div1{            width: 100px;            height: 100px;            background-color: cadetblue;        }        .div2{            width: 180px;             height: 120px;            background-color: coral;        }        .span1{            width: 220px;            height: 280px;            background-color: burlywood;        }        .span2{            width: 280px;            height: 330px;            background-color: crimson;        }    </style>    <body>        <div id="wrap">            <div class="div1">div1</div>            <div class="div2">div2</div>            <span class="span1">span1</span>            <span class="span2">span2</div>        </div>    </body></html>

ログイン後にコピー

出力結果:

結論1:

要素自体が何であるかに関係なく、フローティング要素はブロックレベルのボックスを生成します。そのため、フローティング要素ではブロック要素がフローティングで指定された方向に並べて表示され、フローティング要素ではインライン要素が有効になります。幅と高さをサポートします。

浮動要素の左 (または右) 外側境界は、それを含むブロックの左 (または右) 内側境界を超えることはできません。つまり、左浮動要素の左外側境界は、それのみを超えることができます。上の図から分かるように、浮動要素の上部はその親要素の内部の上部よりも高くすることはできません。左フローティングまたは右フローティングです。これにより、フローティング要素が常にドキュメントの先頭にフローティングされることが回避されます

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>css_float</title>    </head>    <style type="text/css">        body{            margin:0;            font-family: "微软雅黑";            font-size: 20px;        }        #wrap{            margin: 0 auto;            width: 800px;            border: 2px dashed black;            height: 600px;        }        .div1,.div2,span{            float: right;        }        .div1{            width: 100px;            height: 100px;            background-color: cadetblue;        }        .div2{            width: 180px;             height: 120px;            background-color: coral;        }        .span1{            width: 220px;            height: 280px;            background-color: burlywood;        }        .span2{            width: 280px;            height: 330px;            background-color: crimson;        }    </style>    <body>        <div id="wrap">            <div class="div1">div1</div>            <div class="div2">div2</div>            <span class="span1">span1</span>            <span class="span2">span2</div>        </div>    </body></html>

ログイン後にコピー

出力結果:

demo4:demo3 div2 in is set to float:left,

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>css_float</title>    </head>    <style type="text/css">        body{            margin:0;            font-family: "微软雅黑";            font-size: 20px;        }        #wrap{            margin: 0 auto;            width: 800px;            border: 2px dashed black;            height: 600px;        }        .div1{            width: 100px;            height: 100px;            background-color: cadetblue;        }        .div2{            width: 180px;             height: 120px;            background-color: coral;        }        .div3{            width: 220px;            height: 100px;            background-color: burlywood;        }        .div4{            width: 280px;            height: 150px;            background-color: crimson;        }    </style>    <body>        <div id="wrap">            <div class="div1">div1</div>            <div class="div2">div2</div>            <div class="div3">span1</div>            <div class="div4">span2</div>        </div>    </body></html>

ログイン後にコピー

出力結果:

結論 2:

div2 が左に浮くと、文書の流れから離れ、左端がボックスの左端に当たるまで左に移動します。これはドキュメントフローに存在しないため、スペースを占有しませんが、div1、div3、および div4 は依然として通常のフロー内にあり、上から下に配置されているため、div3 は自動的に前の要素の最後に表示されます。

demo5:

 1 <!DOCTYPE html> 2 <html> 3     <head> 4         <meta charset="utf-8"> 5         <title>css_float</title> 6     </head> 7     <style type="text/css"> 8         body{ 9             margin:0;10             font-family: "微软雅黑";11             font-size: 20px;12         }13         #wrap{14             margin: 0 auto;15             width: 800px;16             border: 2px dashed black;17             height: 600px;18         }19         .div1{20             width: 100px;21             height: 100px;22             background-color: cadetblue;23         }24         .div2{25             width: 180px; 26             height: 120px;27             background-color: coral;28             float: left;29         }30         .div3{31             width: 220px;32             height: 220px;33             background-color: burlywood;34         }35         .div4{36             width: 280px;37             height: 150px;38             background-color: crimson;39         }40     </style>41     <body>42         <div id="wrap">43             <div class="div1">div1</div>44             <div class="div2">div2</div>45             <div class="div3">div3</div>46             <div class="div4">div4</div>47         </div>48     </body>49 </html>

ログイン後にコピー

出力結果:

結論 3:

フローティング要素の上部は、以前のすべてのフローティング要素よりも高くすることはできません要素またはブロックレベル要素の最上位が高くなります。 🎈

要素の周囲のフローティング要素が許可されないことを指定します。	left	both none inherit 1
ボックス(要素)をフローティングできるかどうかを指定します。	左	なし継承 1

段落

フォント

5(18pt)

mo6：所有div设置做浮动

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>css_float</title>    </head>    <style type="text/css">        body{            margin:0;            font-family: "微软雅黑";            font-size: 20px;        }        #wrap{            margin: 0 auto;            width: 800px;            border: 2px dashed black;            height: 600px;        }        .div1{            width: 100px;            height: 100px;            background-color: cadetblue;            float: left;        }        .div2{            width: 180px;             height: 120px;            background-color: coral;            float: left;        }        .div3{            width: 220px;            height: 220px;            background-color: burlywood;            float: left;        }        .div4{            width: 480px;            height: 150px;            background-color: crimson;            float: left;        }    </style>    <body>        <div id="wrap">            <div class="div1">div1</div>            <div class="div2">div2</div>            <div class="div3">div3</div>            <div class="div4">div4</div>        </div>    </body></html>

ログイン後にコピー

输出结果：

结论4：

浮动元素不能超出其包含元素的边界。如果超出了边界，后者的浮动元素就会挤到新行上。如果前面的浮动元素高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”，后者浮动元素的顶端始终与上一个浮动元素的底部对齐
所以因为上图div1,2,3,4元素总体宽度超过了他的父级宽度，div4被挤到一个新行上，顶端与上一个浮动元素div3的底部对齐