Why Clear: Right Doesn't Work as Intended

Why clear: right doesn't work as intended

clear on an element only clears the floats before it in document order. It doesn't clear floats after it. The left and right values mean clearance of left floats and right floats preceding an element respectively. They don't mean clearing floats before and after the element.

Since C is being floated, but doesn't have any clearance being applied, it floats next to B. B does not try to clear C because C comes after it in the document structure.

Furthermore, clear: right doesn't have any effect in your test case because none of your elements are being floated to the right anyway.

CSS float right not working correctly

you need to wrap your text inside div and float it left while wrapper div should have height, and I've also added line height for vertical alignment

<div style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray;height:30px;">
   <div style="float:left;line-height:30px;">Contact Details</div>

    <button type="button" class="edit_button" style="float: right;">My Button</button>

</div>

also js fiddle here =)
http://jsfiddle.net/xQgSm/

What does the CSS rule clear: both do?

I won't be explaining how the floats work here (in detail), as this question generally focuses on Why use clear: both; OR what does clear: both; exactly do...

I'll keep this answer simple, and to the point, and will explain to you graphically why clear: both; is required or what it does...

Generally designers float the elements, left or to the right, which creates an empty space on the other side which allows other elements to take up the remaining space.

Why do they float elements?

Elements are floated when the designer needs 2 block level elements side by side. For example say we want to design a basic website which has a layout like below...

Sample Image

Live Example of the demo image.

Code For Demo

/*  CSS:  */
* { /* Not related to floats / clear both, used it for demo purpose only */    box-sizing: border-box;    -moz-box-sizing: border-box;    -webkit-box-sizing: border-box;}
header, footer {    border: 5px solid #000;    height: 100px;}
aside {    float: left;    width: 30%;    border: 5px solid #000;    height: 300px;}
section {    float: left;    width: 70%;    border: 5px solid #000;    height: 300px;}
.clear {    clear: both;}

<!-- HTML --><header>    Header</header><aside>    Aside (Floated Left)</aside><section>    Content (Floated Left, Can Be Floated To Right As Well)</section><!-- Clearing Floating Elements--><div class="clear"></div><footer>    Footer</footer>

Why is system(clear) command not working the way expected?

I figured out the problem with your program. Turns out it has nothing to do with clear (which you said you tried and is working anyway) or carriage return or any of that.

The key: you absolutely must end your printf strings with newlines (\n characters).

Especially this line:

printf("Concentrate on these numbers:\n\n%d\t%d\t%d\n", i1, i2, i3);
//                                                 ^^ needs this

Otherwise, the %d\t%d\t%d part of your string is not being flushed to the standard output, at least not immediately. So you are not seeing that part display until after your screen-clear, and even then, not until after the next string you print ("Enter the numbers...") finishes the line with its own \n. Only then does that accumulated string flush to your screen -- because the system prefers to flush full lines, not partial ones (unless you force the fflush(stdout)).

You also need to end your "Congratulations" and "Better luck..." strings with newlines too, or those won't look right either when your program ends.

That should do it!

Prior suggestion:

Unfortunately this doesn't seem like an appropriate program for beginners. Yes it's simple, but it contains some system-specific or compiler-specific things that are giving you behavior that you're not expecting.

First of all, like others have mentioned, you have a printf line specifying a format containing four numerical %d values, to which you are only providing three integer parameters. The fourth "tries" to print, which is that -2143927864 value you see.

Next, the system-related functions like system("clear") don't appear from your screenshot to actually be clearing the screen. Also, time(NULL) may not be returning the "realtime" integer value that you are expecting.

Finally, it even seems like your environment is not treating your newline \n characters consistently, or as your C program intends. Printing this character should move your cursor to the beginning of the next line. However, it may behave differently on different terminal programs on different platforms! \n sometimes performs a combination of actions provided by both "linefeed" (0x0A) and "carriage return" (\r or 0x0D) characters. The latter merely moves your cursor to the beginning of the current line, not the next line, then prints more characters over previously-printed ones. This appears to be what you are seeing.

Why `float:left` doesn't work with a fixed width?

It seems to me that it is the simple rule that blocks, unless floated, always start a new line. w3.org/TR/CSS2/visuren.html#block-formatting section 9.4.1 –

Why doesn't the height of a container element increase if it contains floated elements?

The floated elements do not add to the height of the container element, and hence if you don't clear them, container height won't increase...

I'll show you visually:

Sample Image

More Explanation:

<div>
  <div style="float: left;"></div>
  <div style="width: 15px;"></div> <!-- This will shift 
                                        besides the top div. Why? Because of the top div 
                                        is floated left, making the 
                                        rest of the space blank -->

  <div style="clear: both;"></div> 
  <!-- Now in order to prevent the next div from floating beside the top ones, 
       we use `clear: both;`. This is like a wall, so now none of the div's 
       will be floated after this point. The container height will now also include the 
       height of these floated divs -->
  <div></div>
</div>

You can also add overflow: hidden; on container elements, but I would suggest you use clear: both; instead.

Also if you might like to self-clear an element you can use

.self_clear:after {
  content: "";
  clear: both;
  display: table;
}

How Does CSS Float Work?

What is float exactly and what does it do?

The float property is misunderstood by most beginners. Well, what exactly does float do? Initially, the float property was introduced to flow text around images, which are floated left or right. Here's another explanation by @Madara Uchicha.
So, is it wrong to use the float property for placing boxes side by side? The answer is no; there is no problem if you use the float property in order to set boxes side by side.
Floating an inline or block level element will make the element behave like an inline-block element.
Demo
If you float an element left or right, the width of the element will be limited to the content it holds, unless width is defined explicitly ...
You cannot float an element center. This is the biggest issue I've always seen with beginners, using ~~float: center;~~, which is not a valid value for the float property. float is generally used to float/move content to the very left or to the very right. There are only four valid values for float property i.e left, right, none (default) and inherit.
Parent element collapses, when it contains floated child elements, in order to prevent this, we use clear: both; property, to clear the floated elements on both the sides, which will prevent the collapsing of the parent element. For more information, you can refer my another answer here.
(Important) Think of it where we have a stack of various elements. When we use float: left; or float: right; the element moves above the stack by one. Hence the elements in the normal document flow will hide behind the floated elements because it is on stack level above the normal floated elements. (Please don't relate this to z-index as that is completely different.)

Taking a case as an example to explain how CSS floats work, assuming we need a simple 2 column layout with a header, footer, and 2 columns, so here is what the blueprint looks like...

Sample Image

In the above example, we will be floating only the red boxes, either you can float both to the left, or you can float on to left, and another to right as well, depends on the layout, if it's 3 columns, you may float 2 columns to left where another one to the right so depends, though in this example, we have a simplified 2 column layout so will float one to left and the other to the right.

Markup and styles for creating the layout explained further down...

<div class="main_wrap">
    <header>Header</header>
    <div class="wrapper clear">
        <div class="floated_left">
            This<br />
            is<br />
            just<br />
            a<br />
            left<br />
            floated<br />
            column<br />
        </div>
        <div class="floated_right">
            This<br />
            is<br />
            just<br />
            a<br />
            right<br />
            floated<br />
            column<br />
        </div>
    </div>
    <footer>Footer</footer>
</div>

* {
    -moz-box-sizing: border-box;       /* Just for demo purpose */
    -webkkit-box-sizing: border-box;   /* Just for demo purpose */
    box-sizing: border-box;            /* Just for demo purpose */
    margin: 0;
    padding: 0;
}

.main_wrap {
    margin: 20px;
    border: 3px solid black;
    width: 520px;
}

header, footer {
    height: 50px;
    border: 3px solid silver;
    text-align: center;
    line-height: 50px;
}

.wrapper {
    border: 3px solid green;
}

.floated_left {
    float: left;
    width: 200px;
    border: 3px solid red;
}

.floated_right {
    float: right;
    width: 300px;
    border: 3px solid red;
}

.clear:after {
    clear: both;
    content: "";
    display: table;
}

Let's go step by step with the layout and see how float works..

First of all, we use the main wrapper element, you can just assume that it's your viewport, then we use header and assign a height of 50px so nothing fancy there. It's just a normal non floated block level element which will take up 100% horizontal space unless it's floated or we assign inline-block to it.

The first valid value for float is left so in our example, we use float: left; for .floated_left, so we intend to float a block to the left of our container element.

Column floated to the left

And yes, if you see, the parent element, which is .wrapper is collapsed, the one you see with a green border didn't expand, but it should right? Will come back to that in a while, for now, we have got a column floated to left.

Coming to the second column, lets it float this one to the right

Another column floated to the right

Here, we have a 300px wide column which we float to the right, which will sit beside the first column as it's floated to the left, and since it's floated to the left, it created empty gutter to the right, and since there was ample of space on the right, our right floated element sat perfectly beside the left one.

Still, the parent element is collapsed, well, let's fix that now. There are many ways to prevent the parent element from getting collapsed.

Add an empty block level element and use clear: both; before the parent element ends, which holds floated elements, now this one is a cheap solution to clear your floating elements which will do the job for you but, I would recommend not to use this.

Add, <div style="clear: both;"></div> before the .wrapper div ends, like

<div class="wrapper clear">
    <!-- Floated columns -->
    <div style="clear: both;"></div>
</div>

Demo

Well, that fixes very well, no collapsed parent anymore, but it adds unnecessary markup to the DOM, so some suggest, to use overflow: hidden; on the parent element holding floated child elements which work as intended.

Use overflow: hidden; on .wrapper

.wrapper {
    border: 3px solid green;
    overflow: hidden;
}

Demo

That saves us an element every time we need to clear float but as I tested various cases with this, it failed in one particular one, which uses box-shadow on the child elements.

Demo (Can't see the shadow on all 4 sides, overflow: hidden; causes this issue)

So what now? Save an element, no overflow: hidden; so go for a clear fix hack, use the below snippet in your CSS, and just as you use overflow: hidden; for the parent element, call the class below on the parent element to self-clear.

.clear:after {
    clear: both;
    content: "";
    display: table;
}

<div class="wrapper clear">
    <!-- Floated Elements -->
</div>

Demo

Here, shadow works as intended, also, it self-clears the parent element which prevents to collapse.

And lastly, we use footer after we clear the floated elements.

Demo

When is float: none; used anyways, as it is the default, so any use to declare float: none;?

Well, it depends, if you are going for a responsive design, you will use this value a lot of times, when you want your floated elements to render one below another at a certain resolution. For that float: none; property plays an important role there.

Few real-world examples of how float is useful.

The first example we already saw is to create one or more than one column layouts.
Using img floated inside p which will enable our content to flow around.

Demo (Without floating img)

Demo 2 (img floated to the left)

Using float for creating horizontal menu - Demo

Float second element as well, or use `margin`

Last but not the least, I want to explain this particular case where you float only single element to the left but you do not float the other, so what happens?

Suppose if we remove float: right; from our .floated_right class, the div will be rendered from extreme left as it isn't floated.

Demo

So in this case, either you can float the to the left as well

You can use margin-left which will be equal to the size of the left floated column i.e 200px wide.

scanf for reading float numbers doesn't work as expected

The scanf catches the input format that is not expected.

The right code should be this:

#include <stdio.h>
#include <stdlib.h>

int main()

{
  float creditSum, interestRate, repayment;

  system("clear");
  

  printf("\n please enter the total Credit sum: ");
  if(scanf("%f", &creditSum)!= 1) return -1;
  printf("\n Please enter the interest rate: ");
  if(scanf("%f", &interestRate)!= 1) return -1;
  printf("\n Please enter the monthly repayment amount: ");
  if(scanf("%f", &repayment)!= 1) return -1;

  printf("\n\n %.2f | %.2f | %.2f\n\n", creditSum, interestRate, repayment);

   return 0;
}

You probably don't want to capture only 2 decimal of the float. You want take the float number and then print it with only 2 decimal.

In any case is important to check the return value of the scanf:

On success, the function returns the number of items of the argument
list successfully filled. This count can match the expected number of
items or be less (even zero) due to a matching failure, a reading
error, or the reach of the end-of-file.

because it can avoid bugs on code.

Why Clear: Right Doesn't Work as Intended