Pourquoi Float est mieux que la position: relative et absolue alors que nous pouvons faire la mise en page rapidement avec la position?

Pourquoi Flotteur est mieux que de position:relative et absolue, alors que nous pouvons faire de mise en page rapidement avec position? et en ce temps de récession, le temps est très important.

lorsque nous faisons 2-col, 3-col ou multi-col de mise en page et la position des autres éléments de mise en page divs.

La plupart du monde en faveur de Flotter . Pourquoi Flotteur est mieux que position:relative et position:absolute pour donner la position d'un élément dans <body> et d'autres éléments imbriqués?

Si à l'aide d'assemblage: modèle d'une page/conception, nous pouvons créer un div conteneur qui est en position:relative, permettant d'en-tête, du contenu et de la valeur liquidative divs à l'intérieur de la div conteneur pour être en position:relative, permettant à ces divs être positionné par rapport à la div conteneur.

et avec le positionnement que nous avons peut garder "maincontent" premier et "leftsidebar" deuxième dans l'ordre de la source qui est bon pour le RÉFÉRENCEMENT.

veuillez expliquer les choses avec des exemples de page de démonstration.

source d'informationauteur Jitendra Vyas

  1. 1

    float ne sera pas briser le flux de documents -- aussi, il sera la position de n'importe quel élément il utilise le meilleur qu'il peut s'adapter à la largeur du conteneur -- dire que j'ai 5 x 200px divs en 800px de largeur du conteneur, la dernière 5e va aller dans une "nouvelle ligne" en dessous de l'autre, à l'aide de position:relative fera vous avez besoin de calculer quand il a besoin d'une pause, et il ne cassera pas correctement depuis le display sera block et aller sur l'ensemble de la largeur ou il sera inline-block ou inline qui n'est pas le rendu de la même façon pour les divs comme block et assez bien gâcher le flux de documents & layout.

    Cela dépend de ce que vous voulez faire: position:relative est utilisée pour déplacer l'élément un peu de côté à partir de son emplacement naturel, alors que float va faire pop à la la plus à gauche ou la plus à droite de la position de l'élément parent. position:absolute vous permettra de le positionner relativement à l'ensemble du document html.

  2. 16

    Positionnement absolu prend l'élément hors de la normale de la circulation des documents. Toute position absolue de l'élément est complètement ignorée lorsque le sujet normal éléments.

    Ce ruptures dans beaucoup de scénarios. Le principal qui vient à l'esprit est de mettre les éléments en dessous de chacun d'autres. Avec votre colonne exemple, assurez-vous que vous pouvez tout à fait la position 3 colonnes, mais vous ne pouvez pas mettre n'importe quoi en dessous sur la page, parce que le flux est toujours en haut de la page. "L'absolu" éléments n'affectent pas où, plus tard, le contenu.

    Avec des chars, il vous suffit de mettre un élément par la suite et il s'enroule autour ou en dessous de l'flottant.

    Qui ne veut pas dire qu'il n'est pas utilisé. Le positionnement est très utile lorsque vous souhaitez afficher une "couche" sur la page web.

    Un court exemple... profiter de cette commune HTML scénario:

    <h2>Section title</h2>
<div class="column1">First</div>
<div class="column2">Second</div>
<div class="column3">Third</div>

<h2>Second section title</h2>
...

    Avec des chars, il vous suffit d'utiliser ce CSS:

    .column1, .column2, .column3 {
  float: left;
  width: 200px;
}
h2 {
  clear: both;
}

    Et tout irait bien. Nous allons absolument position des colonnes de la place:

    .column1, .column2, .column3 {
  position: absolute;
  width: 200px;
  top: 30px; /* enough to miss the first h2 */
}
.column1 {
  left: 0;
  background: pink;
}
.column2 {
  left: 200px;
  background: lightgreen;
}
.column3 {
  left: 400px;
  background: lightblue;
}

    Essayez ceci pour vous-même (avec plus de contenu dans chaque colonne) et voir ce qui se passe pour le second titre, - il sera toujours en droit, en vertu de la première, comme si les colonnes ne sont pas là. En fait, le second titre, serait en grande partie cachée par les colonnes, car ils sont en couches sur le haut du document.

    Sauf si les colonnes sont à hauteur fixe alors il est impossible de savoir où mettre cette rubrique ci-dessous les colonnes. C'est encore pire si vous voulez plus de colonnes dans chaque rubrique.

    Honnêtement, juste lui donner un essai et tenter une belle mise en page à l'aide de positionnement absolu. Vous allez bientôt comprendre ses erreurs.

  3. 4

    Flotteur n'est pas mieux que de la Position, et la Position n'est pas mieux que le Float - les deux doivent être utilisées dans la bonne situation. Je vous recommande de lire le livre http://www.transcendingcss.com/ si vous voulez en savoir plus sur l'utilisation que l'on, et le style CSS en général.

    Voir ici pour un exemple: http://transcendingcss.com/blog/about/changingman_layout_updated/

  4. 3

    Absolue : votre élément est positionné à la première parent de l'élément à une position autre que statique (il doit être explicite, même si la position par défaut est relatif)

    Relative : votre élément est positionné à son dernier frère ou sœur avec une position relative

    Float : par exemple, si il est à gauche, votre élément va se déplacer aussi loin que possible vers la gauche (selon un autre élément, et sa largeur, les éléments de l'avant ne sera pas affectée, les éléments après la volonté de flux autour d'elle.

    Ref:

    http://www.w3schools.com/css/css_positioning.asp

    http://www.w3schools.com/css/css_float.asp

  5. 2

    nous utilisons float comme absolute positionnement ne fonctionne pas pour la variable de la hauteur des colonnes.

    Lorsque vous spécifiez position:absolutel'élément est supprimé du document et placé exactement où vous lui dites d'aller

    Si vous spécifiez position:relativevous pouvez utiliser le haut ou le bas et la gauche ou la droite pour déplacer l'élément par rapport à l'endroit où il devrait normalement se produire dans le document.

    Source: http://www.barelyfitz.com/screencast/html-training/css/positioning/

  6. 1

    je suis d'accord avec Frozenskys, ne sont en fait mieux, mais float maintient l'élément dans le flux de documents, tandis que position supprime l'élément à partir du flux de documents, j'ai donc trouvé float fonctionne mieux sur plusieurs navigateurs et mon IE CSS spécifique est plus petite lorsque j'utilise float

  7. 1

    Comme mentionné ci-dessus, ce n'est pas un général mieux/pire question, mais:

    Positionnement absolu supprime un élément du document de l'écoulement. L'élément de donnée de positionnement absolu n'a plus d'incidence sur la présentation des autres éléments dans le document.

    En tant que tel, il n'est généralement pas le bon choix pour faire une page entière disposition, sauf si vous savez ce que la largeur et la hauteur de l'ensemble de votre contenu va être.

  8. 0

    En fonction de vos objectifs, il peut être meilleur ou pour le pire. Le bon côté est qu'il ne modifie pas le mécanisme de positionnement. Le mauvais côté est que vous ne pouvez pas faire certains trucs (c'est à dire l'élément qui se chevauchent). Flotteur est seulement bon pour la fixation d'un élément soit à bord d'un élément parent.

  9. 0

    Je sais que c'est une ancienne chaîne mais voilà: j'ai trouvé que quand j'ai des informations complètes sur la nature et la quantité de contenu, et de la nature et de la quantité de contenu a tendance à ne pas modifier, puis le positionnement des attributs de me donner plus de contrôle sur ma mise en page de l'apparence. Si la nature et la quantité de contenu a besoin de plus de flexibilité grâce à de fréquentes modifications, le flotteur va me donner cette souplesse, mais n'a généralement pas de me donner autant de contrôle sur l'apparence.

    Je n'ai pas toujours besoin de la précision de positionnement, mais je suis content qu'il est là quand j'ai besoin d'elle.

    Bien sûr, cela dépend aussi comment bien vous savez que votre html/css et comment beaucoup de temps vous êtes prêt à dépenser de codage afin de contourner les limites d'un attribut ou d'une autre.

    Par exemple, <h2> vous donne une grande bold rubrique titre compris par tous les navigateurs, mais vous pouvez faire la même chose avec <p> si vous êtes prêt à ajouter les attributs de style pour rendre votre gras-tête conçu pour les détails. C'est plus de travail, pour la plupart inutiles, mais peut être fait.

    Généralement, il est préférable de le faire en peu de codage que possible, en utilisant des éléments, d'attributs et de valeurs, et que quelques hacks que possible. C'est le point derrière les normes HTML5. Utiliser le positionnement lorsque vous en avez besoin, mais d'utiliser float quand vous le pouvez.

    Grand site. De bons contributeurs. J'apprends beaucoup de choses.