communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

CSS Flottant(flotteur)

CSS Float

Qu'est-ce que CSS Float ?

CSS Float déplacera l'élément vers la gauche ou la droite, et les éléments environnants seront également réorganisés.

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 vers le haut et vers le 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 vers la droite, le flux de texte suivant l'entourera vers la gauche : 

       <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        img
        {
            float:right;
        }
    </style>
</head>

<body>
<p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
    <img src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="95" height="84" />
    人生如梦，亦哭亦歌，叶凋零，落叶随水流。水冰凉，曲终人已散。漪沫温婉，敛眸芬芳，轻拾一抹文字的清香，在时光的水墨里，听一段心灵，撷一段清澈;在心与心的重逢，心与心的微笑，阔一别红尘纷扰，素年锦时，这何尝不是一种最美的守候。人生在世，为求知己。吾无知己，甚感孤独。 为求知己，吾已踏千山，走万水。 惜无人知吾，无人解吾。 甚难受，乃，莫过于父母同不知吾心。 何人能知吾，吾心孤独。 知己?何君是也?
</p>
</body>

</html>

Exécutez le programme pour l'essayer

Éléments flottants adjacents les uns aux autres

Si vous assemblez plusieurs éléments flottants, ils seront les uns à côté des autres s'il y a de l'espace.

Ici, nous utilisons l'attribut float pour la galerie d'images : 

     <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        .thumbnail
        {
            float:left;
            width:110px;
            height:90px;
            margin:5px;
        }
    </style>
</head>

<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="107" height="90">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="107" height="80">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="116" height="90">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="120" height="90">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="107" height="80">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="116" height="90">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="120" height="90">
</body>
</html>

Exécutez le programme pour l'essayer

Effacer the float - use Une fois l'élément clear

flottant, les éléments environnants seront réorganisés. Pour éviter cela, utilisez l'attribut clear. L'attribut

clear précise que les éléments flottants ne peuvent pas apparaître des deux côtés de l'élément.

Utilisez l'attribut clear pour ajouter une galerie d'images au texte : 

     <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        .thumbnail
        {
            float:left;
            width:110px;
            height:90px;
            margin:5px;
        }
        .text_line
        {
            clear:both;
            margin-bottom:2px;
        }
    </style>
</head>

<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p>
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="107" height="90">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="107" height="80">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="116" height="90">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="120" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="107" height="90">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="107" height="80">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="116" height="90">
<img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="120" height="90">
</body>
</html>

Exécutez le programme pour l'essayer

Plus d'exemples

Laissez la première lettre du paragraphe flotter vers la gauche

      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        span
        {
            float:left;
            width:1.2em;
            font-size:400%;
            font-family:algerian,courier;
            line-height:80%;
        }
    </style>
</head>

<body>
<p>
    <span>是</span>
    谁曾说过，有故事的人注定会相遇，不管是以哪种方式。 对有感情不愿亏欠谁，却还是欠着一些。或许等到没了信心时，等到没有希望的时候，会悄然撤离.人人都有过等待与被等待的时候。离开永远比相遇更容易，因为相遇是几亿人中一次的缘分，而离开只是两个人的结局。
</p>



</body>
</html>

Exécutez le programme pour l'essayer

Exemple

Utilisez float pour créer un en-tête, un pied de page, un contenu de gauche et un contenu principal de page Web. 

       <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
div.container
{
	width:100%;
	margin:0px;
	border:1px solid gray;
	line-height:150%;
}
div.header,div.footer
{
	padding:0.5em;
	color:white;
	background-color:gray;
	clear:left;
}
h1.header
{
	padding:0;
	margin:0;
}
div.left
{
	float:left;
	width:160px;
	margin:0;
	padding:1em;
}
div.content
{
	margin-left:190px;
	border-left:1px solid gray;
	padding:1em;
}
</style>
</head>
<body>

<div class="container">
<div class="header"><h1 class="header">w3cschool.cc</h1></div>
<div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>
<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At w3cschool you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>w3cschool - The Largest Web Developers Site On The Net!</p></div>
<div class="footer">Copyright 1999-2005 by Refsnes Data.</div>
</div>

</body>
</html>

Exécutez le programme pour l'essayer

Toutes les propriétés flottantes en CSS

Les chiffres dans la colonne "CSS" indiquent différentes versions CSS (CSS1 ou CSS2 ) définit cet attribut.

属性描述值CSS
clear指定不允许元素周围有浮动元素。left
           right
           both
           none
           inherit		1
float指定一个盒子（元素）是否可以浮动。left
           right
           none
           inherit		1




Formation continue
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> .thumbnail { float:left; width:110px; height:90px; margin:5px; } </style> </head> <body> <h3>图片库</h3> <p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p> <img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="107" height="90"> <img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="107" height="80"> <img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="116" height="90"> <img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="120" height="90"> <img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="107" height="80"> <img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="116" height="90"> <img class="thumbnail" src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" width="120" height="90"> </body> </html>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492411 joue