Floated div not taking full width

问题

Why do floated divs don't take full width? Aren't they still block elements?

Here is an example http://jsfiddle.net/GKjC8/

html

<div id="a">a</div>
<div id="b">b</div>

css

div {
    background-color:cyan;
}
#a {
    float:left;
}
#b {
    clear:left;
}

The a div looks like it's inline since it takes as much space as its content. Can someone explain?

回答1:

You have to set width:

#a {
   float: left;
   width: 100%;
}

“You should always set a width on floated items (except if applied directly to an image – which has implicit width). If no width is set, the results can be unpredictable.” Floatutorial: Float Basics

fiddle

回答2:

That's because float elements behave like if a display: inline-block was applied to it. They expand to their content width.

As @Alek stated, if you want to set the width manually, you need to explicitly set it.

You can check this stackoverflow question for more informations

来源：https://stackoverflow.com/questions/24636335/floated-div-not-taking-full-width