problème float html

Question

je le code suivant:

<div "background-color:green"> 
    <div "float:left">something</div> 
    <div "float:right:>something else</div> 
<div> 

Pourquoi la couleur de fond ne semble pas dans ce cas? Ce qui doit être fait pour le faire apparaître {Code simplifié pour la compréhension, peut ne pas être dans la syntaxe appropriée}

Answer 1

Vous devez effacer la div Vous pouvez utiliser clear: both sur un élément en dessous, mais je trouve souvent cela est plus facile.

<div style="background-color:green; overflow: hidden;"> 
    <div style="float:left;">something</div> 
    <div style="float:right;">something else</div> 
<div> 

Notez le débordement: masqué.

Bien sûr, cela ne fonctionne que si vous n'avez pas besoin d'éléments pour laisser leurs éléments.

Answer 2

Un objet flottant est "levé" de son contenant. Le bord inférieur de la div externe ne s'étend plus à son contenu.

Une option est d'ajouter un élément à clair (clair prend une direction (soit left, right ou both), et se pousse en dessous d'un flotteur il toucherait:

<div style="background-color: green"> 
    <div style="float: left">something</div> 
    <div style="float: right">something else</div> 
    <br style="clear: both;" /> 
<div> 

Answer 3

Vous devez écrire l'attribut style

<div style="background-color:green;"> 
    <div style="float:left;">something</div> 
    <div style="float:right;">something else</div> 
<div>