CSS：流体包装高度取决于浮动元素

Question

I know this is a question asked 12324 times probably, but I still can't find any reliable answers :/

Here is a sample code: http://tinkerbin.com/c0wqtfSa

The wrap should take auto height depending on the float image, but how? :/

Thanks a lot!!!

ps, I can't add any extra div like "clear:both", it should be a solution only with css

Answer 1

Try adding

Overflow: auto;

to your wrapper div, example here: http://tinkerbin.com/pxFxaNX2

Answer 2

Add a <div style="clear:both"></div> after your < p >

You need to clear after a floating element...

So:

    <div class="wrap">
      <div class="imagefloat"></div>
      <p>sldkjfn asdhbf sdjlbhgls dhjbfg ljdshbfgl jsdbfgljh dsgf sgf</p>
      <div style="clear:both"></div>
    </div>

Answer 3

Use clear:both like below:

<div class="wrap">
  <div class="imagefloat"></div>
  <p>sldkjfn asdhbf sdjlbhgls dhjbfg ljdshbfgl jsdbfgljh dsgf sgf</p>
  <div style="clear:both;"></div>
</div>

Answer 4

您只需要在包装 div 上设置溢出和宽度，例如

overflow:hidden

Answer 5

You should use the clearfix workaround. Read this: http://www.webtoolkit.info/css-clearfix.html

The css you need is:

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
     display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

Then just add the clearfix class to your "wrap" div

Answer 6

A very easy and quick fix it to make the wrap div also float. This will make it automatically change it size to all floated elements within in, so:

.wrap {
    float:left;
    border:1px solid #000;
    width: 500px;
    padding: 20px;
}

Whether this is an option for your project depends on the rest of the layout.