Laura23n
3/5/2018 - 12:05 PM

Float si sora lui, clearfix

Clasa clearfix se da parintelui elementului care are float. Este indicat sa se aseze intr-un div separat acest clearfix. Clasa float-left si/sau float-right se da divului parinte, care va contine elementele float-uite, nu elementelor (pt ca pot aparea mai multe elemente in acest div si toate vor trebui sa aiba floatul respectiv). Acestui parinte sa da doar clasa respectiva.

<!--Start by adding the following <div> just after the other two
    To get this to sit in the right place we've floated it left; we've also given it a margin-left of 4%, to create a gutter between the first and second columns. We've set the column widths so that they will all fit — 36% + 30% + 4% + 26% = 96%, which leaves a 4% remainder to form a gutter between the second and third columns (this natural gutter will always appear at the point between the left-floated and right-floated columns, wherever that is.)

    One thing to note here is that you have to think carefully about what source order you place your columns in, and how you float them, to get the desired result. Your content should make sense when read in its source order as well as its visual layout; using floats however can make the visual layout differ from the source order. To illustrate what we mean, try changing the value of float for the second column to right (or have a look at three-column-layout-wrong-order.html (source code)). You'll see that the visual order now comes out like so: div1  div3  div2
-->
<div>
  <h2>Third column</h2>
  <p>Nam consequat scelerisque mattis. Duis pulvinar dapibus magna, eget congue purus mollis sit amet. Sed euismod lacus sit amet ex tempus, a semper felis ultrices. Maecenas a efficitur metus. Nullam tempus pharetra pharetra. Morbi in leo mauris. Nullam gravida ligula eros, lacinia sagittis lorem fermentum ut. Praesent dapibus eros vel mi pretium, nec convallis nibh blandit. Sed scelerisque justo ac ligula mollis laoreet. In mattis, risus et porta scelerisque, augue neque hendrerit orci, sit amet imperdiet risus neque vitae lectus. In tempus lectus a quam posuere vestibulum. Duis quis finibus mi. Nullam commodo mi in enim maximus fermentum. Mauris finibus at lorem vel sollicitudin.</p>
</div>

<style>
  body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

div:nth-of-type(1) {
  width: 36%;
  float: left;
}

div:nth-of-type(2) {
  width: 30%;
  float: left;
  margin-left: 4%;
}

div:nth-of-type(3) {
  width: 26%;
  float: right;
}
</style>
<!--Each one of the columns needs an outer element to contain its content and let us manipulate all of it at once. In this example case we've chosen <div>s, but you could choose something more semantically appropriate like <article>s, <section>s, and <aside>, or whatever.
The body will be 90% of the viewport wide until it gets to 900px wide, in which case it will stay fixed at this width and center itself in the viewport. By default, its children (the <h1> and the two <div>s) will span 100% of the width of the body. If we want the two <div>s to be floated alongside one another, we need to set their widths to total 100% of the width of their parent element or smaller so they can fit alongside one another. 
Here we've set both to be 48% of their parent's width — this totals 96%, leaving us 4% free to act as a gutter between the two columns, giving the content some space to breathe. 
You'll notice here that we are using percentages for all the widths — this is quite a good strategy, as it creates a liquid layout, one that adjusts to different screen sizes and keeps the same proportions for the column widths at smaller screen sizes.
-->
<style>
  body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}
div:nth-of-type(1) {
  width: 48%;
}

div:nth-of-type(2) {
  width: 48%;
}
div:nth-of-type(1) {
  width: 48%;
  float: left;
}

div:nth-of-type(2) {
  width: 48%;
  float: right;
}
</style>

<h1>2 column layout example</h1>
<div>
  <h2>First column</h2>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
</div>

<div>
  <h2>Second column</h2>
  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<!--Any and all content below the floats that isn't floated itself will wrap around the floated elements, which can start to look terrible if it isn't dealt with.
    You'll see that the footer is wrapping around the space beside the longest column, which looks awful — we really want the footer to stay at the bottom, below all the columns. Well, fortunately there's an easy way to solve this problem — the clear property. When you apply this to an element, it basically says "stop floating here" — this element and those after it in the source will not float, unless you apply a new float declaration to another element later on.
    Clear can take three values:

      left: Stop any active left floats
      right: Stop any active right floats
      both: Stop any active left and right floats
      You'll usually just want to set clear: both on the element where you want the floating to stop; in some cases you'll want to just cancel left or right floats.
-->
<footer>
  <p>&copy;2016 your imagination. This isn't really copyright, this is a mockery of the very concept. Use as you wish.</p>
</footer>

<style>
  footer {
  clear: both;
}
</style>


<!--Techniques for Clearing Floats:
If you are in a situation where you always know what the succeeding element is going to be, you can apply the clear: both; value to that element and go about your business.
Of course things don't typically work out that way and we need to have more float-clearing tools in our toolbox:

  1. The Empty Div Method ---- its presence has no contextual meaning at all to the page and is there purely for presentation (<div style="clear: both;"></div>. Sometimes you'll see a <br> element or some other random element used, but div is the most common because it has no browser default styling)

  2. The Overflow Method ----by setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats, effectively clearing it for succeeding elements. Bear in mind that the overflow property isn't specifically for clearing floats. Be careful not to hide content or trigger unwanted scrollbars.

  3. The Easy Clearing Method ---- uses a clever CSS pseudo selector (:after) to clear floats. Rather than setting the overflow on the parent, you apply an additional class like "clearfix" to it. Then apply this CSS:
.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}
This will apply a small bit of content, hidden from view, after the parent element which clears the float. This isn't quite the whole story, as additional code needs to be used to accomodate for older browsers.
  
  
-->
 https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats
 https://css-tricks.com/all-about-floats/
 
 There are four valid values for the float property: 
    Left and Right float elements those directions respectively. 
    None (the default) ensures the element will not float and 
    Inherit which will assume the float value from that elements parent element.

Floats are used very commonly these days to create entire web site layouts featuring multiple columns of information floated so they sit alongside one another (the default behaviour would be for the columns to sit below one another, in the same order as they appear in the source).

    So let's think about how the float works — the element with the float set on it (the <img> element in this case) is taken out of the normal layout flow of the document and stuck to the left hand side of its parent container (<body>, in this case). Any content that comes below the floated element in the normal layout flow will now wrap around it, filling up the space to the right hand side of it as far up as the top of the floated element. There, it will stop.

  Note that floated content still obeys normal box behaviour with things such as margin and borders. We put some right-hand margin on the image to stop the text to the right of it from sitting right next to it.
  
  You can pretty much float anything around anything else, as long as there is space for both items to fit alongside one another. This leads us nicely to talking about multiple-column layouts.
  
  Float's sister property is clear.
  
/* OBLIGATORIU SE FOLOSESTE CLEAR SAU CLEARFIX DE CATE ORI SE APLICA FLOAT */

<div class="clearfix">
 <div class="float-left"></div>
 <div class="float-right"></div>
</div>

SAU

<div class="float-left"></div>
<div class="float-right"></div>
<div class="clear"></div>
 
<!--  https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats -->
<style>
  body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

p {
  line-height: 2;
  word-spacing: 0.1rem;
}
img {
  float: left;
  margin-right: 30px;
}
</style>

<h1>Simple float example</h1>

<img src="https://mdn.mozillademos.org/files/13340/butterfly.jpg" alt="A pretty butterfly with red, white, and brown coloring, sitting on a large leaf">

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>

<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  The whole width can be tricky to calculate.
  
  Our examples so far have shown us floating boxes that have no styling applied — this is easy. The troubles start to come when you want to start styling those boxes — adding in backgrounds, borders, padding, etc. 
  1) At this point, you'll see that your layout has broken — because of the extra width introduced by the padding and the border, the three columns no longer fit on one line, so the third column drops below the other two.
  There are a couple of ways to fix this. The best way is to add the following to your CSS:
        
        * {
          box-sizing: border-box;
        }
  Box-sizing comes to our rescue by making the box model change so the width of the box is taken as content + padding + border, not just content — so adding padding and border won't make the box any wider — it'll just make the content narrower to accomodate.


  2) At this point we have another problem — the footer is pressed right up against the longest column, which isn't ideal — let's try fixing this by giving the footer some margin-top to go along with its clearing:

        footer {
          clear: both;
          margin-top: 4%;
        }
  
    3) This however doesn't work — floated elements exist outside the normal document layout flow, and behave quite strangely in some ways.
    So, let's fix this! First, add the following new <div> into your HTML, just above the footer:

        <div class="clearfix"></div>
      Adding an invisible "clearfix div" after floats you want to clear is very useful.
      The next thing we'd like to do is move the clear: both; declaration off the rule that is styling our footer, and put it on the clearfix div instead:

      .clearfix {
        clear: both;
      }
      
    4) We have a nice top margin on our footer now, but we also have another problem — the clearfix div is being given the same background, padding and border as our columns and the footer! To fix this, let's first give each of our column divs a class of column:

        <div class="column">
          ...
        </div>
      Now let's change our rule that applies the box styling to the divs and footer so that only the column divs are styled:
          
          .column, footer {
            padding: 1%;
            border: 2px solid black;
            background-color: red;
          }
      That just about fixes it for now.
      
    5) So, the example we have built up so far works, but another problem is that the column heights are different — it would look a lot better if the columns were all the same height.
      We can fix this by giving all the columns a fixed height:
            .column {
        height: 550px;
        }
      This is not ideal in many situations however — it makes the design inflexible.

    This is exactly the kind of problem new layout technologies like flexbox were designed to solve. Flexbox can automatically stretch columns so that they will be as long as the longest column.


    You could also consider:
    
    - Setting the background color of the columns to the same as the background color of their parent, so you can't see that the heights are different. This is the best other option at the moment.
    - Setting them to a fixed height and make the content scroll using overflow.
    
    - Using a technique called faux columns — this involves taking the background (and borders) off the actual columns, and drawing a fake background on the column's parent element that looks like the column backgrounds. Unfortunately, this wouldn't be able to handle the column borders. 
      
.float-left{ float: left;}
.float-right {float: right;}


.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }

.clearfix:before, .clearfix:after{ content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }

.clearfix:after { clear: both; }

.clearfix { zoom: 1; }