CSS Nested Floats & Clears Behaving Inconsistently

 

Please see this jsFiddle example for reference.

Most of us are fairly familiar with a simple technique to get CSS Colunms (2 divs side-by site) which involves floating one and pushing the other over using margin & width:auto followed by one of many clearing techniques. (Exibit A @ jsFiddle Reference) .

This Technique works fairly well and works nicely with all forms of clearing I know personally:

  • clear: both div at bottom of container
  • overflow: hidden for the container
  • Clearfix for the container

    • However the simple implentation of this works great when you know the width of the left element and want the right element to fill up the rest of it's container.

    This technique works great in reverse too ( float: right and using margin-right ) with the caveat that you must put the floated (right) element first in the container for IE to render correctly. (Exibit B @ jsFiddle Reference)

    However, I've noticed a problem when we deal with nested clearing. (Aka Clears inside one of the colunms).

    Once I put a clearing container inside the un-floated colunm (Exibit C & D) I notice some strange behavior in WebKit & Gecko browsers. The clearing element is getting caught on the outer float and clears the float from it's parent.

    This does not happen when the master float is to the left. (Exibit E)

    Is there a way around this, I'd like to continue using float: right on the known-width column if possible, this seems a bit strange that the one works and the other doesn't.

    Also, strangely enough, this isn't a problem in IE9, (but is in IE 6-8).

    For reference, this is the output of the jsFiddle as rendered by Chrome 17.0.963.46 on Windows 7 64bit:

    给予

    Any Ideas?

    Edit : I should note that wrapping the inner float with overflow: hidden seems to work, but it has it's own complications (such that it basically breaks anything with relative/absolute positioned components, DHTML Dropdowns. etc and isn't always a possible solution.

    I could be missing something important here... but does this work?

    http://jsfiddle.net/mikecruz/8Hnjg/

    链接地址: http://www.djcxy.com/p/88414.html

    上一篇: 尽管出现溢出，但Div在宽度约束之外生长：auto

    下一篇: CSS嵌套浮动和清除表现不一致