Question

I need to set float:left for all first-level children, but after adding this style elements with display:inline/inline-block/ other not block followed by #root selector after adding have default value for display = display:block; elements added before #root have standart default display value.

#root > * {
     float:left;
}

---

<div id="root">
    <div></div>
<div>

---

var aBefore = document.createElement("a");
var aAfter = document.createElement("a");
var root = document.getElementById("root");

document.body.insertBefore(aBefore,root);
root.appendChild(aAfter);

display(aBefore);
display(aAfter);

function display(element){
    alert(window.getComputedStyle(element).display);
}

Example:

http://jsfiddle.net/LpQ5V/1/

Answer 1

Giving an element a float value inherently implies display: block.

The operative portion of the spec:

The element generates a block box that is floated to the left.

edit — Esailija correctly points out that display: none will in fact hide a floated element 🙂

edit again — what I said above is probably something of an oversimplification. It’s not so much that float forces display: block; it’s that it causes an effect that means the same thing as display: block for the element. It really only applies/works–for elements that are “box” elements anyway (according to the spec). I haven’t done exhaustive empirical testing to see whether floating a <span> or <em> element would do anything at all.