根据孩子的身高，父母div没有达到身高。

Question

Here is my code:

HTML

<div id="body">
    <div id="left">a</div>
    <div id="main">b</div>
    <div id="right">c</div>
</div>

CSS:

#body {    width: 520px;    border:solid 10px #d2d2d2;}
#left { float:left;width:170px;height:200px}
#main { float:left;width:170px;height:400px}
#right { float:left;width:170px;height:200px}

Why doesnt #body surround div#left,#div#main, div#right

If i set display : table it is ok

Answer 1

Add overflow:hidden to #body css.

#body {    width: 520px;    border:solid 10px #d2d2d2; overflow:hidden;}

OR

Use any class (eg clearfix) on the parent element. Refer CSS Trick article for reference: https://css-tricks.com/snippets/css/clear-fix/

Answer 2

The float property is designed to allow content to drop through the bottom of the block containing it because it is intended to be used for things such as images which multiple paragraphs should wrap around.

See containing floats for more details and examples.

Set overflow: hidden on #body to cause the container to expand to contain all the floating elements inside it. Alternatively see some other techniques .

Another approach, although one that doesn't work in particularly old versions of Internet Explorer is to use display: inline-block instead of float .

Answer 3

 #body { 
    overflow:hidden;
 }

Answer 4

Try this:

<div id="body">
    <div id="left">a</div>
    <div id="main">b</div>
    <div id="right">c</div>
    <div style="clear:both;"></div>
</div>