Comment mettre en page en utilisant float ? Exemple de disposition flottante

Comment mettre en page en utilisant float ? Cet article vous présentera comment utiliser float pour mettre en page le contenu. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Dans l'article précédent [Qu'est-ce que float ? Explication détaillée de l'attribut float ] présente ce qu'est l'attribut float, pourquoi nous avons besoin d'avoir des connaissances flottantes, etc. Si vous êtes intéressé, vous pouvez vous y référer. Jetons un coup d'œil à la manière dont le contenu est mis en page flottant à travers un exemple de mise en page flottante.

1. Utilisez float pour envelopper le contenu

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

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

Rendu :

2. Utilisez « clear » pour forcer le contenu à flotter

Utilisez float pour mettre en page le contenu. Une erreur courante consiste à oublier d’ajouter le nettoyage. Il s'agit d'une instruction adressée à l'élément situé après le contenu flottant pour le déplacer suffisamment loin pour qu'il ne soit pas affecté par le contenu flottant qui le précède.

Le problème du déplacement des éléments vers le haut se produit lorsque le contenu "normal" derrière un élément float n'est pas suffisant pour l'effacer.

Dans ce cas, vous pouvez voir les titres des sections suivantes prendre effet ou même le contenu déborder de la section « Contenu » de la page. En effet, le contenu flottant est « retiré du flux de documents » et ne force donc aucune boîte contenante à se développer vers le bas de la page.

La meilleure façon de forcer un conteneur à s'étendre autour du contenu flottant lorsqu'aucun autre élément n'est présent est d'insérer un div vide avec clear défini sur « les deux », comme ceci :

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

Modifions l'exemple ci-dessus :

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

Rendu :

3. Utilisez des flottants pour diviser le contenu en colonnes

Code html :

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

Code css :

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

Rendu :

Vous pouvez également ne pas vous limiter à définir deux colonnes de flottants, et pouvez facilement en avoir trois ou quatre sur la page. Il existe d'autres options. Pour une disposition à trois colonnes, vous pouvez faire flotter les divs vers la gauche et la droite et afficher le contenu « normal » entre les deux.

4. Utilisez des « tuiles » flottantes pour les images et le texte

Regardons maintenant quelque chose qui devrait être simple mais qui est en réalité assez complexe. Si vous avez beaucoup de petits DIV - par exemple des photos dans une galerie de photos - vous pouvez créer une page simple en les faisant simplement flotter d'un côté.

Cela fonctionne très bien lorsque les éléments à faire flotter ont tous la même hauteur :

Mais lorsque les hauteurs sont différentes cela crée beaucoup de problèmes car " Les éléments « supérieurs » bloqueront ceux qui flottent par la suite vers la gauche :

REMARQUE : Rechargez cette page pour voir d'autres configurations.

Si tel est le cas, l'option la plus sûre consiste à utiliser un tableau pour la mise en page. Dans certains cas, vous pouvez éviter cela en insérant clear="left" dans chaque nième élément, mais cela peut être difficile à maintenir lorsque des éléments sont ajoutés ou supprimés.

Résumé : Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!