Some weird thing with clear both via css pseudo :after

Question

Examine this code:

HTML

Sometext over here


        

Answer 1

The :after clear float trick works on floated element inside the pseudo elements parent.

If you would put the

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;
}

Sometext over here