CSS Layout - Float en Clear

CSS Layout - Float en Clear

CSS float De eigenschap bepaalt hoe een element moet floaten.

CSS clear De eigenschap bepaalt welke elementen naast de elementen die worden gewist kunnen floaten en op welke zijde.

float eigenschap

float De eigenschap wordt gebruikt om inhoud te positioneren en te formatteren, bijvoorbeeld om een afbeelding naar links te floaten naar de tekst in de container.

float De eigenschap kan een van de volgende waarden instellen:

  • left - Het element zal floaten naar de linkerkant van zijn container
  • right - Het element zal floaten aan de rechterkant van zijn container
  • none - Het element zal niet floaten (het zal op de positie worden weergegeven waar het net in de tekst is verschenen). Standaardwaarde.
  • inherit - Het element neemt de float-waarde van zijn ouder over

De eenvoudigste gebruikswijze is:float De eigenschap kan het effect van tekst om het beeld heen omkleden (bijvoorbeeld in krant) mogelijk maken.

Voorbeeld - float: right;

In het volgende voorbeeld wordt aangegeven dat het beeld in de tekst naar rechts moet floaten:

Ananas

Top Web-technologie handleidingen - allemaal gratis. Bij CodeW3C.com kunt u alle website bouw handleidingen vinden die u nodig heeft. Van basis HTML tot CSS, en verder gaande XML, SQL, JS, PHP.

Onze referentiehandleiding biedt een breed scala aan technologieën voor websites. Inclusief W3C-standaarden zoals HTML, CSS, XML. En andere technologieën zoals JavaScript, PHP, SQL.

Bij CodeW3C.com bieden we duizenden voorbeelden. Door onze online editor te gebruiken, kunt u deze voorbeelden aanpassen en code uitproberen.

Voorbeeld

img {
  float: right;
{}

Probeer het zelf

Voorbeeld - float: left;

In het volgende voorbeeld wordt aangegeven dat het beeld in de tekst moet worden weergegeven:Naar linksFloat:

Ananas

Top Web-technologie handleidingen - allemaal gratis. Bij CodeW3C.com kunt u alle website bouw handleidingen vinden die u nodig heeft. Van basis HTML tot CSS, en verder gaande XML, SQL, JS, PHP.

Onze referentiehandleiding biedt een breed scala aan technologieën voor websites. Inclusief W3C-standaarden zoals HTML, CSS, XML. En andere technologieën zoals JavaScript, PHP, SQL.

Bij CodeW3C.com bieden we duizenden voorbeelden. Door onze online editor te gebruiken, kunt u deze voorbeelden aanpassen en code uitproberen.

Voorbeeld

img {
  float: left;
{}

Probeer het zelf

Voorbeeld - Geen float

In de volgende voorbeeld, wordt het beeld weergegeven op de positie waar het net in de tekst is verschenen (float: none;):

Ananas Top Web-technologie handleidingen - allemaal gratis. Bij CodeW3C.com kunt u alle website bouw handleidingen vinden die u nodig heeft. Van basis HTML tot CSS, en verder gaande XML, SQL, JS, PHP. Onze referentiehandleiding biedt een breed scala aan technologieën voor websites. Inclusief W3C-standaarden zoals HTML, CSS, XML. En andere technologieën zoals JavaScript, PHP, SQL. Bij CodeW3C.com bieden we duizenden voorbeelden. Door onze online editor te gebruiken, kunt u deze voorbeelden aanpassen en code uitproberen.

Voorbeeld

img {
  float: none;
{}

Probeer het zelf

Uitgebreide lezing

Nascholingsboeken:CSS float