floatを使ってレイアウトするにはどうすればいいですか？フローティングレイアウトの例

float を使用してレイアウトするにはどうすればよいですか?この記事では、float を使用してコンテンツをレイアウトする方法を紹介します。困っている友人は参考にしていただければ幸いです。

前回の記事では【floatとは？ float 属性の詳しい説明 ]では、float 属性とは何か、floating についてなぜ知っておく必要があるのか​​などを紹介していますので、興味のある方は参考にしてください。フローティング レイアウトの例を通して、フロート レイアウトの内容を見てみましょう。

1. float を使用してコンテンツをラップします。

html コード:

<div class="demo">
	<h1>浮动--文字环绕</h1>
	<div class="box_left">向左浮动</div>
	<p>此文本位于浮动盒子（.box_left）之后的正常段落中。该段可以看作是浅绿色的盒子。请注意，此轮廓延伸 到浮动div的 后面。这很重要，因为这意味着段落的左侧实际上位于页面的左侧。只是该段落的内容已经向右移动，以“绕过”浮动的DIV。如果你试图操纵与浮点相邻的段落一侧的边距或 填充，则会产生影响。</p>
	<div class="box_right">向右浮动</div>
	<p>现在我们添加第二段并用内容充实它。你应该看到，一旦覆盖了div的高度，此段落文本将环绕它，以便文本不再缩进。类似的效果可在html通过设置来实现。</p>
	<p>float属性的一个复杂因素是Internet Explorer将在浮动的div盒子和后面的文本之间添加一些填充像素。这在标准中没有位置，只是他们“弱化”CSS和HTML的方式。在其他浏览器中，段落文本将与浮动的DIV对接。如果要在所有浏览器中填充，则需要为浮动元素指定边距。</p>
</div>

css コード:

.demo {
	width: 520px;
	overflow: hidden;
	border: 2px solid paleturquoise;
	padding: 10px;
	margin: 100px auto;
}

.box_left {
	float: left;
	margin-right: 15px;
	width: 150px;
	height: 100px;
	border-radius: 5px;
	background-color: rgb(207, 232, 220);
	padding: 1em;
}

.box_right {
	float: right;
	margin-left: 15px;
	width: 150px;
	height: 100px;
	border-radius: 5px;
	background-color: rgb(207, 232, 220);
	padding: 1em;
}

レンダリング:

2. コンテンツを強制的にフローティングするには、「clear」を使用します。

フロートを使用してコンテンツをレイアウトするときによくある間違いクリア入れるの忘れてました。これは、フローティング コンテンツの後の要素に対して、その前のフロート コンテンツの影響を受けないように十分下に移動するように指示します。

要素が上に移動する問題は、float 要素の背後にある「通常の」コンテンツだけではクリアできない場合に発生します。

この場合、後続のセクション タイトルが有効になったり、ページの「コンテンツ」セクションからコンテンツがはみ出したりする場合があります。これは、フローティングされたコンテンツが「ドキュメント フローから取り出される」ため、含まれるボックスがページ上で下方向に強制的に拡張されないためです。

他の要素が存在しない場合に、フローティングされたコンテンツの周囲にコンテナを強制的に展開させる最良の方法は、次のように、clear を「both」に設定した空の div を挿入することです。上記の例を変更します:

<div   style="max-width:90%"></div>

レンダリング:

3. float を使用してコンテンツを列に分割します

html コード:

<div class="demo">
	<h1>浮动--文字环绕</h1>
	<div class="box_left">向左浮动</div>
	<p>此文本位于浮动盒子（.box_left）之后的正常段落中。该段可以看作是浅绿色的盒子。请注意，此轮廓延伸 到浮动div的 后面。这很重要，因为这意味着段落的左侧实际上位于页面的左侧。只是该段落的内容已经向右移动，以“绕过”浮动的DIV。如果你试图操纵与浮点相邻的段落一侧的边距或 填充，则会产生影响。</p>
	<div class="box_right">向右浮动</div>
	<p>现在我们添加第二段并用内容充实它。你应该看到，一旦覆盖了div的高度，此段落文本将环绕它，以便文本不再缩进。类似的效果可在html通过设置来实现。</p>
	<div style="clear: both;"></div>
	<p>float属性的一个复杂因素是Internet Explorer将在浮动的div盒子和后面的文本之间添加一些填充像素。这在标准中没有位置，只是他们“弱化”CSS和HTML的方式。在其他浏览器中，段落文本将与浮动的DIV对接。如果要在所有浏览器中填充，则需要为浮动元素指定边距。</p>
</div>

css コード:

<div class="demo">
	<div class="box_1">
		<p>第一列</p>
		<p>float的一个稍微不常见属性但有非常强大的用途，可以将内容分组为列。这可以通过将div向左浮动以形成左侧列，然后添加第二个div来完成，同时向左浮动以位于其旁边。每个DIV必须具有宽度，你可以向第一个DIV添加右边距以分隔列。在许多情况下，这使得TABLE元素的使用变得不必要。</p>
	</div>

	<div class="box_2">
		<p>第一列</p>
		<div style="width: 100px;height: 50px;border: 1px solid #000;"></div>
		<p>你可以看到此框中的内容与第一个段落相邻，并且与第一个示例不同，一旦清除了第一个浮点的高度，它就不会回绕。</p>
	</div>
	<div>使用这种布局，你必须记住在最后一个DIV之后添加一个清除，否则后续内容可以出现在两列中和周围。</div>
</div>

レンダリング:

また、2 つの列フロートの設定に限定されず、ページ上に 3 つまたは 4 つを簡単に設定することもできます。他のオプションもあります。 3 列レイアウトの場合、div を左右にフローティングし、その間に「通常の」コンテンツを表示できます。

4. フローティング「タイル」画像とテキストの使用

次に、単純であるはずの、実際には非常に複雑なものを見てみましょう。フォト ギャラリー内の写真など、小さな DIV が多数ある場合は、それらをすべて片側にフローティングするだけでシンプルなページを作成できます。

これは、浮かせるアイテムがすべて同じ高さである場合にうまく機能します:

しかし、高さが異なる場合、多くの問題が発生します。 「上位」項目は、その後左にフロートする項目をブロックします:

注: 他の設定を表示するには、このページをリロードします。

#この場合、最も安全なオプションは、レイアウトにテーブルを使用することです。場合によっては、n 番目の要素ごとに clear="left" を挿入することでこれを回避できますが、項目の追加または削除時にこれを維持するのが困難になる可能性があります。

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。

以上がfloatを使ってレイアウトするにはどうすればいいですか？フローティングレイアウトの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。