Are floated element really removed from normal html flow?

Are floated element really removed from normal html flow?



Here's my jsFiddle

In my Fiddle link i have floated my left-sidebar and right-sidebar. As per

my knowledge floated element are removed from html normal flow. i just did

not understand if it is so why it is displacing my right-sidebar.

<div class="content-area">

<div class="left-sidebar"></div>

<div class="main-area">hi</div>

<div class="right-sidebar"></div>

my css:

.content-area {

background-color: #bbb;

height: 310px;

}

.left-sidebar {

float: left;

width: 50px;

height: 100%;

background-color: #abcdef;

}

.right-sidebar {

float: right;

width: 50px;

height: 100%;

background-color: #abcdef;

}