HTML+CSS Facile à démarrer avec Float (float)

Qu'est-ce que le flotteur ?

Float est souvent utilisé pour les images, mais il est également très utile en mise en page

Comment les éléments flottent

L'élément flotte horizontalement, ce qui signifie que l'élément ne peut se déplacer que vers la gauche et la droite, mais pas de haut en bas. Un élément flottant se déplacera aussi loin que possible vers la gauche ou la droite jusqu'à ce que son bord extérieur touche la bordure de la boîte conteneur ou d'une autre boîte flottante.

Les éléments après l'élément flottant l'entoureront.

Les éléments situés avant l'élément flottant ne seront pas affectés.

Si l'image flotte à droite, le flux de texte ci-dessous s'enroulera à gauche de celle-ci

div{

float:right;

}

Ci-dessous nous ferons un exemple : par exemple, il y a 2 divs avec des backgrounds différents

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>浮动</title>
	<style type="text/css">
		/*在这里会用到id选择器*/
		div{
			width:600px;
			height:600px;
			border:1px solid black;
		}

		#dv1{
			width:100px;
			height:100px;
			background-color:green;
			float:left;
		}

		#dv2{
			width:100px;
			height:100px;
			background-color:red;
			float:left;
		}

	</style>
</head>
<body>
	<div>
		<div id='dv1'></div>

		<div id='dv2'></div>
	</div>
</body>
</html>

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动</title> <style type="text/css"> /*在这里会用到id选择器*/ div{ width:600px; height:600px; border:1px solid black; } #dv1{ width:100px; height:100px; background-color:green; float:left; } #dv2{ width:100px; height:100px; background-color:red; float:left; } </style> </head> <body> <div> <div id='dv1'></div> <div id='dv2'></div> </div> </body> </html>

soumettre Réinitialiser le code

Opération automatique

HTML+CSS Facile à démarrer avec Float (float)

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]