CSS :before float itself floats

I have markup something like:

<label/><input/><label/><input/>

And want to float the labels to the left of the inputs with a width on the labels. If the label text wraps, I would like it to push down the next label and input.

The solution I am trying to use runs like this

label { float: left; clear: left; width: 25% }
label:before { content: " "; display: block; float: none; clear: left; }

However this does not work. In fact, if I replace the " " with "a" I can see that the generated content in the :before is acting like it is float:left, even with the float:none on there!

EDIT I'm mostly trying to understand why the above CSS behaves the way it does. Any pure-CSS solutions would be cool as well, but I开发者_运维知识库'm not looking to style by changing markup :)

A demonstration of the problem is at https://singpolyma.net/so-5080542.html you can see the red "see here" text is floating to the left with the label, instead of clearing everything and being on a line by itself like I would expect.

Any ideas?

Here my solution. It's almost because of your input that has a block property. Make it float:left and it seems to work as you expected. Is that it ?

I know it's out of date, but try this code below. I've tried it on Your code, and it works.

label:before{
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

This solution comes from: http://css-tricks.com/snippets/css/clear-fix/

Found a website talking about it: http://robertnyman.com/2007/04/12/how-to-clear-css-floats-without-extra-markup-different-techniques-explained/

.container-with-generated-content:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;

}

Why don't you wrap your label + input inside a container and clear on this container? Btw, this is far more easy to style and will work in browsers not supporting :before speudo elements.

I don't exactly understand what are you trying to achieve but I hope I got it right. Try:

<div>
  <label>Label</label>
  <input type="text" />
</div>

<div>
  <label>Label 2</label>
  <input type="text" />
</div>

CSS:

label {
    width: 25%;
    float: left;
    display: block;
}

div {
    clear: left;
}