Bonjour,

Lorsque je dois mettre un background sur un container qui contient des div float (Bootstrap, Foundation..) j'utilise en général overflow:hidden pour palier au problème des float.

<div class="container">
 <div class="row">
  <div class="col-sm-6">
   <!-- contenu flottant -->
  </div>
  <div class="col-sm-6">
   <!-- contenu flottant -->
  </div>
 </div>
</div>

.container{
 overflow:hidden:
}

Mais lorsqu'un élément possède un survol qui peut dépasser la boîte, ça me cause soucis.

J'ai donc utilisé une technique qui me vient de je ne sais où, sûrement un forum ou une expérience perso, qui est le display table

.container{
 display:table;
 width:100%;
}

Ca fonctionne, mais je ne sais pas si c'est la meilleure solution, ni si il y'a réellement une "meilleure solution" parmi toutes.

Il y'a bien le :after aussi qui fait le trick

.container:after{
 content:'';
 display:block;
 clear:both;
}

Tout ça pour dire, toutes ces techniques fonctionnent, mais y'en a t'il une mieux que l'autre ? Et si oui, pour quelles raisons ?

Merci à vous, pros du CSS !

PS : ne prenez pas en compte le fait que j'utilise .container dans l'exemple. Bien entendu j'ai une classe perso, je ne surcharge pas .container comme un barbare, merci

Salut,

Je ne sais pas si c'est mieux mais Bootstrap propose la classe "clearfix" pour régler ce problème de float : http://getbootstrap.com/css/#helper-classes-clearfix

Bonne journée,

Pitet a écrit:

Salut,

Je ne sais pas si c'est mieux mais Bootstrap propose la classe "clearfix" pour régler ce problème de float : http://getbootstrap.com/css/#helper-classes-clearfix

Bonne journée,

Si ça répond bien en parti à ma question ! Ca signifie que Bootstrap prend bien en compte ce problème connu et récurrent. En effet je suis actuellement sur Bootstrap donc cette manip peut me servir, mais en général je me demandais si mettre un display table sur le parent n'étais pas un peu violent.

Je vais peut-être suivre les conseils de Bootstrap et travailler sur le :after alors.

Merci en tout cas !