Le principe des float en CSS sur le forum Programmation - 30-12-2014 00:50:41

Mario_the_Boss2

Niveau 10

30 décembre 2014 à 00:50:41

Bien le bonjour ,

Je vais avoir l'air un peu ennuyant mais ce serait plaisant si une âme bienveillante voudrait bien m'expliquer le principe des float en CSS

1. Quand on dit par exemple float : left; Ca veut dire quoi?

2. Si on met deux float : left; Ca feras quoi?

3. Ce qu'il faut retenir avec les float (pour vous dire à quel point je suis perdu pour cette propriété)

Merci d'avance pour vos réponses

zpenter

Niveau 4

30 décembre 2014 à 00:51:23

le CSS c'est de la merde
le web c'est de la merde

Mario_the_Boss2

Niveau 10

30 décembre 2014 à 00:53:45

Des réponses plus sérieuses svp

Tharsis

Niveau 10

30 décembre 2014 à 00:59:44

Ça veut tout simplement dire que l'élément "flottera", c'est-à-dire qu'il ne prendra pas en compte les autres éléments pour se positionner. En temps normal les éléments se positionnent les uns à la suite des autres en gros.Si tu règles le positionnement sur "float", l'élément sortira de cet ordre et le suivant se positionnera à sa place en l'ignorant. Par contre il me semble que c'est quelque chose dans le genre

position: float;
left: 10px;

Donc l'élément flottera à gauche à 10px du "bord" (l'élément <html> sert de "fond" il me semble)

ryviel

Niveau 5

30 décembre 2014 à 01:05:36

1- Que l'élément est flottant et qu'il se déplace vers la gauche autant qu'il peut dans son contenant
2- Le premier élément sera la plus à gauche possible, le second sera à droite du premier (ou en dessous si plus de place) http://www.w3schools.com/css/tryit.asp?filename=trycss_float_elements

Message édité le 30 décembre 2014 à 01:05:57 par ryviel

Mario_the_Boss2

Niveau 10

30 décembre 2014 à 01:05:56

Merci pour votre réponse, c'est un peu plus clair maintenant!

Mais dans ce cas, à quoi sert la position absolute, ca fait pas la même chose?

Tharsis

Niveau 10

30 décembre 2014 à 01:08:01

Peut-être que je dis une bêtise remarque Absolute normalement c'est par rapport au premier élément parent non-statique

Mario_the_Boss2

Niveau 10

30 décembre 2014 à 01:08:52

Merci aussi de votre réponse ryviel

Mario_the_Boss2

Niveau 10

30 décembre 2014 à 01:11:42

Tharsis

Bon il est temps de voir les choses au clair

Selon moi :

Absolute : Peut-être mis partout sur la page ou par rapport à un élément parent
Relative : Même chose qu'absolute (je doute fortement)
Float : Même chose (si je me fies à Tharsis)

SVP, démêlez le vrai du faux ne me fera surement que du bien

Tharsis

Niveau 10

30 décembre 2014 à 02:02:49

Fie-toi plus à ce que dit ryviel, j'ai confondu avec le positionnement absolu pour ma part
Relatif c'est par rapport à "où il devrait être" que se fait le décalage, absolu c'est par rapport au premier parent non-statique.

Caletlog

Niveau 10

30 décembre 2014 à 10:46:33

Oulah, quelques petites confusions de Tharsis.

On récapitule :

- Absolute : Position _absolue_ dans la page, c'est-à-dire que l'origine part d'en haut à gauche et qu'on positionne où on veut. L'élément est complètement sorti du "flux" de la page ; il ne se base plus sur les autres éléments _du flux_ pour se positionner (mais si deux éléments dans un même élément absolus sont statiques, ils s'influenceront aux-mêmes).

- Relative : dans la même veine qu'absolute, l'élément sort du flux de la page et on peut le positionner comme on veut par rapport à l'origine, sans être influencé par les éléments encore dans le flux. Sauf que là, l'origine, c'est le point d'origine de l'élément parent. Donc si un élément X est contenu dans un élément parent Y d'origine (100, 250), alors ça sera l'origine de l'élément X si on le place en "relative".

- Float : L'élément n'est pas sorti du flux, il est juste placé dynamiquement dans ce flux. Sa position dépend toujours de celle des autres, et inversement. Un élément en float:left va influencer les éléments suivants, même s'ils ne sont pas en float.
Le principe des floats est de positionner l'élément toujours à l'endroit le plus poussé par rapport à la direction donnée. Un float peut être simulé à peu près fidèlement par une bonne combinaison d'éléments relatifs, mais pour des grilles classiques, le float remplit donc très bien ce rôle en calculant les positions pour nous.

Mario_the_Boss2

Niveau 10

30 décembre 2014 à 23:25:48

MERCI catelog, beaucoup plus clair maintenant

Mario_the_Boss2

Niveau 10

30 décembre 2014 à 23:31:53

En gros le flux, c'est la page? Ou la disposition des éléments sur la page?

Caletlog

Niveau 10

31 décembre 2014 à 00:27:03

Le flux, c'est l'ensemble des éléments sur une page qui respectent des règles données pour leur positionnement.
Par défaut, les éléments dans le flux se mettent les uns à côté des autres, jusqu'à remplir une ligne, puis on passe à la suivante, le tout ponctué de règles (le cas des display: ... par exemple).

Si un élément sort du flux de la page, c'est qu'il n'est plus confronté aux règles de placement des éléments de cette page et qu'il n'a donc plus d'influence (là encore, à quelques exceptions près) sur les autres toujours dedans, et inversement.

Mario_the_Boss2

Niveau 10

31 décembre 2014 à 14:46:08

Merci