CSS 学習ノート -- フローティング float_html/css_WEB-ITnose を CSS に配置-htmlチュートリアル-php.cn

CSS 学習ノート -- フローティング float_html/css_WEB-ITnose を CSS に配置

WBOY

リリース： 2016-06-24 11:30:09

オリジナル

1439 人が閲覧しました

昨日ボックスモデルの問題を解決した後、新たな知識の曖昧さが現れました: 浮動位置と絶対位置?今日はまずフローティングに関連する問題を解決し、最初に解決したい問題をリストします:

1. フローティングとは具体的にどのようなものですか?

2. 要素に対するフローティングの影響は何ですか?

3. float は主に何に使用されますか?

最初の質問: フローティングとはどのようなものですか?

W3CSCHOOL によるフローティングプロパティの説明: フローティングボックスは、その外縁が包含ボックスまたは別のフローティングボックスの境界線に触れるまで、左または右に移動できます。したがって、フローティングには、左、右、なしの 3 つのタイプがあります。

私の個人的な理解は、HTML ファイルをブラウザにロードするプロセスは、シンクに水を入れることに似ており、水はページ内のさまざまな要素を表します。秩序ある方法 (文書の流れの順序は、私たちが書くときと同じ、上から下、左から右)。浮動属性 (float) を持つ要素が表示されると、それは水の流れの中に追加の泡のようなもので、水の上に浮かびます (これは、要素がドキュメントフローから外れることを意味します)。水の流れが止まった後 (ページが読み込まれた後)、要素はシンクまたは他の泡の端にドッキングされます (浮遊要素は収容ボックスの端または別の浮遊要素の端にあります)。

フローティング要素が文書フローから外れているかどうかについては、指導ビデオを見て、ある教師が「いいえ」と言い、別の教師が「はい」と答えたので、最初は混乱しました。そこで私は自分でコードを入力し、いくつかの実験を行いました:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><style>    #div1{        height: 100px;        background-color: #e13b00;        float: left;        clear: both;    }</style><body>    <div id="div1">        div1div1d    </div>    <p>1234567890    </p>    <p>1234567890    </p></body></html>

ログイン後にコピー

上記のコードの効果は次のとおりです:

背景が赤い Div は、floating の定義によれば、左フローティング要素であるはずです。ドキュメントフローの具体的なパフォーマンスは次のとおりです。 :

2 番目の p タグを確認したところ、このタグが実際には DIV ブロックをカバーしているか、単独で行を占有しており、端から始まっていないことがわかりました。 DIV ブロックの。これは次のことを意味します:

フローティング要素セットは実際にはドキュメントフローの外にありますが、この要素のコンテンツは依然として視覚的にスペースを占有し、他の要素を覆い隠したり、他の要素によって覆われたりしません。

2. 浮動要素は他の要素にどのような影響を与えますか?

フローティング要素が他の要素に及ぼす影響は、上記の例に示すとおりです。フローティング要素は、自身のコンテンツのサイズに応じて、後続の要素のコンテンツを後方に押し出します (特に注意してください。ここで説明する内容は次のとおりです)。内容です!内容です!)

ここでの特別な注意: 一部のビデオチュートリアルでは、フローティングの効果はそのすぐ後ろの要素にのみ影響すると言っていますが、このステートメントには依然として問題があります。上で示した例では、赤い DIV ブロックのフローティング効果が 2 つの p であることを示しています。浮動要素が影響する範囲は、浮動要素のコンテンツのサイズによって決まります。

float のクリアの影響は、主に 2 つの方法で行われます:

1 つ目: 影響を受けたくない要素に属性 Clear: Both/right/left を追加します。この属性の意味は、何もクリアすることではありません。ただし、この属性を持つ要素の左側または右側には浮動要素コンテンツは許可されないことを理解する必要があります。

たとえば、clear:left; のような属性を最初の p タグに追加すると、DIV ブロックの下から表示され、2 番目の p タグも下に表示されます (順番に表示されるため)。そして、clear:left を 2 番目の p タグに追加すると、最初の p タグは依然としてフローティングの影響を受けます。

2 番目の方法: 影響を受けたくない要素に width: 100%; overflow: hidden; を追加する方法も効果的です。

3. float は主に何に使用されますか?

実際、フローティングの役割は依然として非常に重要です これを使用して、非常に一般的な 2 列または複数列の Web ページレイアウトを実装できます。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><style>    *{margin: 0px;padding: 0px}    #div{        width: 70%;        margin: auto;    }    #header{        height: 200px;        background-color: darkslategrey;    }    #main{        height: 300px;        padding: 2%;        background-color: #bfbfbf;    }    #left{        float: left;        width: 30%;        height: 300px;        background-color: #0044aa;    }    #right{        float: right;        width: 65%;        height: 300px;        background-color: yellow;    }    #footer{        height: 200px;        background-color: rosybrown;    }</style><body>    <div id="div">        <div id="header">        </div>        <div id="main">            <div id="left"></div>            <div id="right"></div>        </div>        <div id="footer">        </div>    </div></body></html>

ログイン後にコピー

効果は次のとおりです。

これは、Web ページのレイアウトの一種ですが、実際には、中央部分を 3 列またはより複雑な形式に変更することもできます。

フローティングについて学ぶのはここまでです。今日私が感じたのは、知識を学ぶ過程で、より多くのコードを作成し、より多くの実験を行う必要があるということです。その方法を本で読んだり、教師のやり方を読んだりするだけでは不十分です。彼らの考えは完全ではありません。疑わしい質問には不用意に答えないでください。もちろん勉強だけではなく、常に自分の考えを持つことが大切です。

絶対位置の問題は明日解決されます。

2016年1月9日

小さな一歩を踏み出さなければ、1,000マイルに到達することはできません

追記：私が確認した情報のほとんどはインターネットから得たものです。侵害がある場合は、削除するために私に連絡してください。