float e collapsing parent 5

Se invece il contenitore avesse una width del 70%, il paragrafo fluirebbe come nell’esempio sotto e avremmo bisogno di usare il clear.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis massa in quam euismod luctus. Cras ac diam ac dolor ullamcorper porttitor ac sit amet purus. Suspendisse vehicula erat sed dui bibendum consequat dignissim vitae mauris. Pellentesque cursus, risus non dapibus bibendum, lacus ligula auctor nulla, at laoreet nulla sem vel orci. Ut porta, metus at accumsan feugiat, mauris tellus accumsan lorem, vitae consequat diam orci non mi. Suspendisse potenti. Cras blandit nibh ut lectus lobortis scelerisque. Cras vitae eleifend tortor. Maecenas tristique enim id risus placerat at interdum diam faucibus. Sed a odio vehicula nunc porta posuere. Fusce lacinia sodales vestibulum. Curabitur velit felis, varius eget rutrum vitae, tincidunt quis urna. Aenean condimentum tincidunt quam, ut varius risus feugiat in. Donec sem metus, malesuada et tincidunt eget, interdum nec risus. Nullam eu vehicula lorem. Nam facilisis consequat blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vehicula dolor in augue malesuada sit amet scelerisque enim consequat. Duis hendrerit bibendum leo, eget sollicitudin odio aliquet et.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis massa in quam euismod luctus. Cras ac diam ac dolor ullamcorper porttitor ac sit amet purus. Suspendisse vehicula erat sed dui bibendum consequat dignissim vitae mauris. Pellentesque cursus, risus non dapibus bibendum, lacus ligula auctor nulla, at laoreet nulla sem vel orci. Ut porta, metus at accumsan feugiat, mauris tellus accumsan lorem, vitae consequat diam orci non mi. Suspendisse potenti. Cras blandit nibh ut lectus lobortis scelerisque. Cras vitae eleifend tortor. Maecenas tristique enim id risus placerat at interdum diam faucibus. Sed a odio vehicula nunc porta posuere. Fusce lacinia sodales vestibulum. Curabitur velit felis, varius eget rutrum vitae, tincidunt quis urna. Aenean condimentum tincidunt quam, ut varius risus feugiat in. Donec sem metus, malesuada et tincidunt eget, interdum nec risus. Nullam eu vehicula lorem. Nam facilisis consequat blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vehicula dolor in augue malesuada sit amet scelerisque enim consequat. Duis hendrerit bibendum leo, eget sollicitudin odio aliquet et.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis massa in quam euismod luctus. Cras ac diam ac dolor ullamcorper porttitor ac sit amet purus. Suspendisse vehicula erat sed dui bibendum consequat dignissim vitae mauris. Pellentesque cursus, risus non dapibus bibendum, lacus ligula auctor nulla, at laoreet nulla sem vel orci. Ut porta, metus at accumsan feugiat, mauris tellus accumsan lorem, vitae consequat diam orci non mi. Suspendisse potenti. Cras blandit nibh ut lectus lobortis scelerisque. Cras vitae eleifend tortor. Maecenas tristique enim id risus placerat at interdum diam faucibus. Sed a odio vehicula nunc porta posuere. Fusce lacinia sodales vestibulum. Curabitur velit felis, varius eget rutrum vitae, tincidunt quis urna. Aenean condimentum tincidunt quam, ut varius risus feugiat in. Donec sem metus, malesuada et tincidunt eget, interdum nec risus. Nullam eu vehicula lorem. Nam facilisis consequat blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vehicula dolor in augue malesuada sit amet scelerisque enim consequat. Duis hendrerit bibendum leo, eget sollicitudin odio aliquet et.

Abbiamo 2 tipi di effetti, oltre all’affiancamento dei due div:

  1. Il contenitore non si vede più. E’ come se non avesse più contenuto, perciò i suoi bordi sono collassati (la riga nera di due pixel che vediamo sopra).
  2. Inoltre, il terzo paragrafo, fuori dal contenitore, che prima stava sotto, è anch’esso fluito a fianco degli altri due.

Inoltre, per far sì che questo testo di accompagnamento non fluisse anch’esso, abbiamo inserito nel codice un clear: left in linea, per semplicità… 🙂

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *