Wie wird ein Layout mit Float erstellt? Beispiel für ein schwebendes Layout

Wie wird ein Layout mit Float erstellt? In diesem Artikel erfahren Sie, wie Sie Float zum Layouten von Inhalten verwenden. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Im vorherigen Artikel [Was ist Float? Eine ausführliche Erklärung des Float-Attributs ] stellt vor, was das Float-Attribut ist, warum wir über Floating-Kenntnisse verfügen müssen usw. Wenn Sie interessiert sind, können Sie darauf verweisen. Schauen wir uns anhand eines Beispiels eines Floating-Layouts an, wie Float-Layouts Inhalte darstellen.

1. Verwenden Sie Float, um Inhalte zu verpacken

HTML-Code:

<div class="demo">
	<h1 id="浮动-文字环绕">浮动--文字环绕</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-Code:

.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;
}

Rendering:

2. Verwenden Sie „clear“, um das Floaten von Inhalten zu erzwingen

Häufige Fehler bei der Verwendung von Float zum Layouten von Inhalten I Ich habe vergessen, das Klartext hinzuzufügen. Dies ist eine Anweisung an das Element nach dem schwebenden Inhalt, es weit genug nach unten zu verschieben, damit es nicht durch den schwebenden Inhalt davor beeinträchtigt wird.

Das Problem der nach oben verschobenen Elemente tritt auf, wenn der „normale“ Inhalt hinter einem Float-Element nicht ausreicht, um es zu löschen.

In diesem Fall kann es sein, dass nachfolgende Abschnittstitel wirksam werden oder dass der Inhalt sogar den Abschnitt „Inhalt“ der Seite überfüllt. Dies liegt daran, dass der schwebende Inhalt „aus dem Dokumentfluss genommen“ wird und daher keine enthaltenden Felder dazu zwingt, auf der Seite nach unten zu expandieren.

Der beste Weg, um zu erzwingen, dass sich der Container um den schwebenden Inhalt herum ausdehnt, wenn keine anderen Elemente vorhanden sind, besteht darin, ein leeres Div einzufügen, wobei „clear“ wie folgt auf „both“ gesetzt ist:

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

Lassen Sie uns ändern das obige Beispiel:

<div class="demo">
	<h1 id="浮动-文字环绕">浮动--文字环绕</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>

Rendering:

3. Verwenden Sie Floats, um den Inhalt in Spalten zu unterteilen

HTML-Code:

<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>

CSS-Code:

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

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

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

Rendering:

Du kann sich auch nicht auf die Einrichtung von zwei Spalten-Floats beschränken und kann problemlos drei oder vier auf der Seite haben. Es gibt andere Möglichkeiten. Bei einem dreispaltigen Layout können Sie die Divs nach links und rechts verschieben und dazwischen „normalen“ Inhalt anzeigen.

4. Verwenden Sie schwebende „Kacheln“ für Bilder und Text

Jetzt schauen wir uns etwas an, das einfach sein sollte, aber eigentlich ziemlich komplex ist. Wenn Sie viele kleine DIVs haben – zum Beispiel Fotos in einer Fotogalerie – können Sie eine einfache Seite erstellen, indem Sie sie einfach alle auf eine Seite verschieben.

Das funktioniert hervorragend, wenn die zu schwebenden Gegenstände alle die gleiche Höhe haben:

Aber wenn die Höhen unterschiedlich sind, verursacht es viele Probleme, weil „ „Höhere“ Elemente blockieren diejenigen, die anschließend nach links schweben:

HINWEIS: Laden Sie diese Seite neu, um andere Konfigurationen anzuzeigen.

Wenn dies der Fall ist, ist es am sichersten, eine Tabelle für das Layout zu verwenden. In einigen Fällen können Sie dies vermeiden, indem Sie in jedes n-te Element „clear="left" einfügen. Dies kann jedoch schwierig beizubehalten sein, wenn Elemente hinzugefügt oder entfernt werden.

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonWie wird ein Layout mit Float erstellt? Beispiel für ein schwebendes Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!