CSS
flyter

Syntax

• tydlig: ingen | vänster | rätt | båda | inline-start | inline-ände;
• flottör: vänster | rätt | ingen | inline-start | inline-ände;

Anmärkningar

Flyt en bild inom text

Den mest grundläggande användningen av ett flottör är att ha textomslag runt en bild. Nedanstående kod kommer att producera två stycken och en bild, där det andra stycket flyter runt bilden. Lägg märke till att det alltid är innehåll efter det flytande elementet som flyter runt det flytande elementet.

HTML:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>

<img src="http://lorempixel.com/200/100/" />

<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>

CSS:

img {
  float:left;
  margin-right:1rem;
}

Detta kommer att vara utgången

Codepen Link

Enkel layout med två bredda kolumner

En enkel layout med två kolumner består av två flytande element med fast bredd. Observera att sidofältet och innehållsområdet inte har samma höjd i det här exemplet. Detta är en av de svåra delarna med layouter med flera kolumner som använder flottörer och kräver lösningar för att flera kolumner verkar ha samma höjd.

HTML:

<div class="wrapper">

<div class="sidebar">
  <h2>Sidebar</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>
</div>

<div class="content">
  <h1>Content</h1>

  <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
</div>

</div>

CSS:

.wrapper {
  width:600px;
  padding:20px;
  background-color:pink;

  /* Floated elements don't use any height. Adding "overflow:hidden;" forces the
     parent element to expand to contain its floated children. */
  overflow:hidden;
}

.sidebar {
  width:150px;
  float:left;
  background-color:blue;
}

.content {
  width:450px;
  float:right;
  background-color:yellow;
}

Enkel tre fast breddskolonnlayout

HTML:

<div class="wrapper">
  <div class="left-sidebar">
    <h1>Left Sidebar</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
  </div>
  <div class="content">
    <h1>Content</h1>
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. </p>
  </div>
  <div class="right-sidebar">
    <h1>Right Sidebar</h1>
    <p>Fusce ac turpis quis ligula lacinia aliquet.</p>
  </div>
</div>

CSS:

.wrapper {
  width:600px;
  background-color:pink;
  padding:20px;

  /* Floated elements don't use any height. Adding "overflow:hidden;" forces the
     parent element to expand to contain its floated children. */
  overflow:hidden;
}

.left-sidebar {
  width:150px;
  background-color:blue;
  float:left;
}

.content {
  width:300px;
  background-color:yellow;
  float:left;
}

.right-sidebar {
  width:150px;
  background-color:green;
  float:right;
}

Två kolumner lata / giriga layout

Denna layout använder en flytande kolumn för att skapa en två-kolumnlayout utan definierade bredder. I det här exemplet är den vänstra sidofältet "lat" eftersom den bara tar upp så mycket utrymme som den behöver. Ett annat sätt att säga detta är att den vänstra sidofältet är "krympt." Den högra innehållskolumnen är "girig" eftersom den tar upp allt återstående utrymme.

HTML:

<div class="sidebar">
<h1>Sidebar</h1>
<img src="http://lorempixel.com/150/200/" />
</div>

<div class="content">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. </p>
</div>

CSS:

.sidebar {
  /* `display:table;` shrink-wraps the column */
  display:table;
  float:left;
  background-color:blue;
}

.content {
  /* `overflow:hidden;` prevents `.content` from flowing under `.sidebar` */
  overflow:hidden;
  background-color:yellow;
}

Fiol

tydlig egendom

Den tydliga egenskapen är direkt relaterad till flottörer. Fastighetsvärden:

• ingen - Standard. Tillåter flytande element på båda sidor
• vänster - Inga flytande element tillåtna på vänster sida
• höger - Inga flytande element tillåtna på höger sida
• båda - Inga flytande element tillåtna varken på vänster eller höger sida
• initial - Ställer in den här egenskapen till dess standardvärde. Läs om initial
• ärva - Ärver den här egenskapen från dess överordnade element. Läs om ärva

<html>
<head>
<style>
img {
    float: left;
}

p.clear {
    clear: both;
}
</style>
</head>
<body>

<img src="https://static.pexels.com/photos/69372/pexels-photo-69372-medium.jpeg" width="100">
<p>Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum </p>
<p class="clear">Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum </p>

</body>
</html>

Clearfix

Clearfix-hacket är ett populärt sätt att innehålla flottörer (N. Gallagher aka @necolas)

För att inte förväxlas med den clear egenskapen, är clearfix ett begrepp (som också är relaterat till flottörer, alltså den möjliga förvirringen). För att innehålla flottörer måste du lägga till .cf eller .clearfix i behållaren ( överordnade ) och utforma denna klass med några regler som beskrivs nedan.

3 versioner med något olika effekter (källor: Ett nytt micro clearfix-hack av N. Gallagher och clearfix omlastat av TJ Koblentz):

Clearfix (med toppmarginal kollaps av innehållande flottörer som fortfarande förekommer)

.cf:after {
    content: "";
    display: table;
}

.cf:after {
    clear: both;
}

Clearfix förhindrar också kollaps av toppmarginaler av inneslutna flottörer

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

Clearfix med stöd för föråldrade webbläsare IE6 och IE7

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

Codepen visar clearfix-effekt

Annan resurs: Allt du vet om clearfix är fel (clearfix och BFC - Blockformatering Context medan hasLayout hänför sig till föråldrade webbläsare IE6 kanske 7)

In-line DIV med hjälp av flottör

div är ett element på blocknivå, dvs att det upptar hela sidbredden och syskon är placerade en under den andra, oavsett bredd.

<div>
    <p>This is DIV 1</p>
</div>
<div>
    <p>This is DIV 2</p>
</div>

Utgången från följande kod kommer att vara

Vi kan göra dem i linje genom att lägga till en float css-egenskap till div .

HTML:

<div class="outer-div">
    <div class="inner-div1">
        <p>This is DIV 1</p>
    </div>
    <div class="inner-div2">
        <p>This is DIV 2</p>
    </div>
</div>

CSS

.inner-div1 {
    width: 50%;
    margin-right:0px;
    float:left;
    background : #337ab7;
    padding:50px 0px;
}
 
.inner-div2 {
    width: 50%;
    margin-right:0px;
    float:left;
    background : #dd2c00;
    padding:50px 0px;
}
 
p {
    text-align:center;
}

Codepen Link

Användning av överflödesegenskaper för att rensa flottörer

Om du ställer in overflow till hidden , auto eller scroll till ett element rensas alla flottörer i det elementet.

Obs: med overflow:scroll kommer alltid att visa rullboxen