虽然<div>这样的元素通常会增长以适应其内容，但使用float属性可能会给CSS新手带来一个惊人的问题:如果浮动元素具有非浮动的父元素，父元素将会折叠。
例如:
< div > < span style=" font - family:宋体;"> Div 1 < / Div > < span style=" font - family:宋体;"2 > Div < / Div > < / div >
本例中的父div不会展开以包含它的浮动子div——它看起来高度为:0。
你如何解决这个问题?
我想在这里创建一个详尽的解决方案列表。如果您知道跨浏览器兼容性问题，请指出来。
解决方案1
浮动父节点。
< span style=" font - family:宋体;"> < span style=" font - family:宋体;"> Div 1 < / Div > < span style=" font - family:宋体;"2 > Div < / Div > < / div >
优点:语义代码。 缺点:你可能不总是希望父元素浮动。即使你这样做了，你是否浮动了父母的父母等等?必须浮动每个祖先元素吗?
解决方案2
给父节点一个明确的高度。
< span style=" font - family:宋体;> < span style=" font - family:宋体;"> Div 1 < / Div > < span style=" font - family:宋体;"2 > Div < / Div > < / div >
优点:语义代码。 缺点:不灵活——如果内容改变或浏览器大小调整，布局就会中断。
解决方案3
在父元素中添加一个“spacer”元素，如下所示:
<div> <div style=“float： left;”>div 1</div> <div style=“float： left;”>div 2</div> <div class=“spacer” style=“clear： both;”></div> </div>
优点:编码简单明了。 缺点:没有语义性;分隔符div仅作为布局hack存在。
解决方案4
将parent设置为overflow: auto。
< span style=" font - family:宋体;"> < span style=" font - family:宋体;"> Div 1 < / Div > < span style=" font - family:宋体;"2 > Div < / Div > < / div >
优点:不需要额外的div。 缺点:看起来像一个黑客-这不是溢出属性的声明的目的。
评论?其他建议吗?
