Some weird thing with clear both via css pseudo :after - html

Question

Examine this code:
HTML
<h1 class="one">Sometext over here</h1>
<input type="text" placeholder="E-mail" class="two">
CSS
.one {
display: block;
float: left;
width: 450px;
height: 60px;
padding-top: 25px;
color: #ffffff;
font-size:34px;
font-weight: 800;
}
.one:after { clear: both; }
.two {
margin: 0 auto;
font-size: 150%;
width: 200px;
height: 20px;
}
JSfiddle
Why is the clear both with the after element not working in this example above? while the clearing with <div style="clear:both"></div> inside the layout it self do work.

Answer 1

Try this, add display: block to input:
CSS
.one {
display: block;
width: 450px;
height: 60px;
padding-top: 25px;
color: #ffffff;
font-size: 34px;
font-weight: 800;
text-align: left;
}
.two {
font-size: 150%;
width: 200px;
height: 20px;
display: block;
margin:0 auto;
}
HTML
<h1 class="one">Sometext over here</h1>
<input type="text" placeholder="E-mail" class="two">
DEMO HERE

Answer 2

The :after clear float trick works on floated element inside the pseudo elements parent.
If you would put the <div style="clear:both"></div> inside the h1 it will not clear the float either, so it has to be a sibling or a parent element of the floated element
So in your case just clear the float on the input
.one {
float: left;
width: 450px;
height: 60px;
padding-top: 25px;
color: #ccc;
font-size:34px;
font-weight: 800;
}
.two {
display: block;
margin: 0 auto;
font-size: 150%;
width: 200px;
height: 20px;
clear: both;
}
<h1 class="one">Sometext over here</h1>
<input type="text" placeholder="E-mail" class="two">

Answer 3

It would be good if you provide clearfix to parent element try this snippet hope this could help you. I'm also including :before but this is the best way to clear the floats. here is the jsfiddle link https://jsfiddle.net/rhulkashyap/jjv6t6gd/
.one {
display: block;
float: left;
width: 450px;
height: 60px;
padding-top: 25px;
color: #111;
font-size: 34px;
font-weight: 800;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.two {
margin: 0 auto;
font-size: 150%;
width: 200px;
height: 20px;
}
<div class="clearfix">
<h1 class="one">Sometext over here</h1>
</div>
<input type="text" placeholder="E-mail" class="two">