CSS-float float_html/css_WEB-ITnose

Float は強力な属性ですが、その仕組みを知らないと問題が発生する可能性もあります。この記事では主に float の原理と基本的な使用法を紹介します。

印刷業界での float の応用例を見てみましょう。雑誌。多くの雑誌記事には左側に画像があり、HTML/CSS の世界にはフローティング スタイルの画像があり、テキストはその周りを回り込みます。雑誌のレイアウト。画像はフローティング属性の多くの応用例の 1 つにすぎません。実際、フローティングを使用して 2 列 (複数列) レイアウトを実現することもできます。

フローティングの定義

W3C の定義:

フロート (または「フローティング」または「フローティング」) の最も興味深い特徴は、現在の行上で左または右にシフトされるボックスです。 」ボックス）は、コンテンツがその側面に沿って流れることができる（または、「clear」プロパティによってコンテンツが流れることを禁止されている）ことを意味します。

単純に設定すると、フローティング要素は対応する左または右にフローティングされ、コンテンツはフローティング要素の対応する場所に埋められます。

フローティングには、left|right|inherit|none の 4 つの属性値があり、これらはフローティングのままです。 、右フローティング、および継承 (親要素からのフローティング属性値) と None。

雑誌エフェクトの例を見てみましょう:

雑誌エフェクト フローティング

画像のスタイルは次のとおりです:

img {     float: right;    margin: 10px;}

フローティングパフォーマンス

HTML には次のルールがあります: 通常のドキュメント フローでは、各ブロック要素 (div、p、h1...) が最初に通常のドキュメント フローでラップされて配置されます。通常のドキュメント フローの外側に表示されます。そのため、フローティング要素は折り返されず、要素の隣に表示されます。

のスタイルは、3 つのフローティング ブロックが設定されていません。ブロック要素:

.block {     width: 200px;    height: 200px;}

これら 3 つのブロックは通常のドキュメント フローの下に表示されます。各要素は前の要素のすぐ下にあります。ここで、3 つのブロックすべてを左フローティングに設定します。

.block {     float: left;    width: 200px;    height: 200px;}

その効果は次のとおりです。左フローティング

フローティング後の各ブロック要素はすべてフローティング要素に従います。親要素の幅が足りない場合は、フローティング要素が自動的に折り返して表示されます。この例を見て、フローティング要素を縮小してみてください。ブロック要素は自動的に折り返されます。

フロートのクリア

フローティング要素は通常のドキュメント フローの外にあるため、フローティング後のドキュメント構造に影響を与えるため、フローティング後もそれに応じてフロートをクリアする必要があります。要素を削除して、ドキュメント構造を通常のドキュメント フローに戻すことができます。フロートをクリアする方法は多数あります。最初の最も基本的な方法は、対応する clear 属性値です: left|right|both|inherit|none。対応するフロートは、対応するクリアフロートに対応します。フローティングの例を見てみましょう。合計 4 つのブロック要素があり、最初の 2 つはフローティングで、最後の 2 つはフローティングではありません。構造は次のとおりです。

<div class="block pink float"></div><div class="block blue float"></div><div class="block green"></div><div class="block orange"></div>

.block {    width: 200px;    height: 200px;}.float { float: left; }.pink { background: #ee3e64; }.blue { background: #44accf; }.green { background: #b7d84b; }.orange { background: #E2A741; }

ここを見てください

緑色のブロックはどこに行ったのでしょうか? 見てください。 HTML の緑色のブロックが選択されているソース コードは、ピンク色のブロックの真下にあることがわかります。フローティングのままで一行に表示されると予想されますが、あたかもそこにあるのと同じではないかのように、それらは通常のドキュメント フローから切り離されています。そのため、最初のフローティングされていない要素はその位置を占め、フローティングされた要素によって覆われます。したがって、フロートをクリアして緑色のブロックを表示する必要があります。

コード構造は次のとおりです:

<div class="block pink float"></div><div class="block blue float"></div><div class="block green clear"></div><div class="block orange"></div>

.block {    width: 200px;    height: 200px;}.float { float: left; }.clear { clear: left; }.pink { background: #ee3e64; }.blue { background: #44accf; }.green { background: #b7d84b; }.orange { background: #E2A741; }

フロートを正しくクリアすると、緑色のブロックが表示されます。通常のドキュメント フローに影響を与えずに要素をフローティングにします。 float をクリアした後の効果

float 属性を使用してレイアウトを実行します

DIV レイアウトを使用しているので、DIV+float はほとんどの人が好む方法です。列レイアウトを実現するために使用します。簡単な 2 列レイアウトを見てみましょう。

CSS は次のとおりです:

#container {    width: 960px;    margin: 0 auto;}#content {    float: left;    width: 660px;    background: #fff;}#navigation {    float: right;    width: 300px;    background: #eee;}#footer {    clear: both;    background: #aaa;    padding: 10px;}

2 列レイアウトは、#content を float left に設定し、#navigation を float right に設定することで実現されます。 、合計の幅は #container です。左フローティングと右フローティングの両方があるため、#footer はフローティングをクリアする必要があることに注意してください。したがって、両側のフロートをクリアするには、clear:both を使用します

見てみましょう。 #footer がクリアされていない場合は、ここをクリックしてください。

Float の優先順位

HTML 内の別の位置に配置された Floating 要素も、結果を表示します。ここをクリックしてください。

この例では、画像は HTML 構造の右側にフローティングされ、フローティングされていない要素 P の前にあります。 コード構造は次のとおりです。

<div id="container">    <img  src="/static/imghwm/default1.png"  data-src="image.gif"  class="lazy" / alt="CSS-float float_html/css_WEB-ITnose" >    <p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p></div>

#container {    width: 280px;    margin: 0 auto;    padding: 10px;    background: #aaa;    border: 1px solid #999;}img {    float: right;}

次に、HTML の構造を変更します。 P 要素の後ろにある浮動要素 IMG。

<div id="container">    <p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p>    <img  src="/static/imghwm/default1.png"  data-src="image.gif"  class="lazy" / alt="CSS-float float_html/css_WEB-ITnose" ></div>

具体的な効果についてはここをクリックしてください

图片这时已经没有包含在#container里,因为浮动优先原则里,之前的例子都是浮动元素在未浮动元素之前,所以得到的结果都是在我们的预期之内,而现在我们没有按照这个规则写我们的HTML结构,所以图片溢出在了包含它的父元素之外,这是由于collapsing.

当一个父元素包含了一些浮动元素,而这些浮动元素并没有向它应该的方式围绕在未浮动元素周围时collapsing就出现了.正如上面的例子中,浮动元素IMG就像并不在#container中一样.

一个最常见去修复这个问题的方式就是在我们的浮动元素后面添加一个有清除浮动属性的元素,跟我们之前清除浮动的方式很像,只是新增了一个额外的元素,代码看下面:

<div id="container">    <p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p>    <img  src="/static/imghwm/default1.png"  data-src="image.gif"  class="lazy" / alt="CSS-float float_html/css_WEB-ITnose" >    <div   style="max-width:90%"></div></div>

但是新增了一行额外的代码并不是一个很好的方法,下面我们有几个其他的方法.

现在有一个HMTL,一个父元素有三个浮动的图片,代码结构如下:

<div id="container">    <img  src="/static/imghwm/default1.png"  data-src="image.gif"  class="lazy" / alt="CSS-float float_html/css_WEB-ITnose" >    <img  src="/static/imghwm/default1.png"  data-src="image.gif"  class="lazy" / alt="CSS-float float_html/css_WEB-ITnose" >    <img  src="/static/imghwm/default1.png"  data-src="image.gif"  class="lazy" / alt="CSS-float float_html/css_WEB-ITnose" ></div>

#container {    width: 260px;    margin: 0 auto;    padding: 10px 0 10px 10px;    background: #aaa;    border: 1px solid #999;}img {    float: left;    margin: 0 5px 0 0;}

我们可以很快的意识到父元素并没有包含浮动的图片,因为浮动元素并不在文档流中,所以对于父元素来说它是空的,结果看这里

现在我们用CSS来修复这个问题而不是添加额外的HTML标记.有一个方法能让父元素自己清除它包含的浮动元素的浮动-overflow:hidden.要注意的是overflow属性并不是为清除浮动而设计的,它可以隐藏内容和滚动条.现在我们在#container上使用这个属性.

#container {    overflow: hidden;    width: 260px;    margin: 0 auto;    padding: 10px 0 10px 10px;    background: #aaa;    border: 1px solid #999;}

显示结果戳这里

还有清除浮动的方法就是使用伪类选择器:

#container:after {    content: ".";    display: block;    height: 0;    clear: both;    visibility: hidden;}

总结:

浮动可以让你的布局变得随意和响应式,同时清除浮动的方式也有很多种,选择你最习惯和喜欢的方式,让布局变得更加优美.