你如何让父母的浮动元素不崩溃？

本文介绍了你如何让父母的浮动元素不崩溃？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 虽然< div> 的元素通常会增长以适合其内容，但使用 float CSS新手的一个令人吃惊的问题：如果浮动元素具有非浮动的父元素，父元素将会折叠。 例如： < div> < div style =float：left;> Div 1< / div> < div style =float：left;> Div 2< / div> < / div> 此示例中的父div将不扩展以包含其浮动子 - 它会出现 height：0 。 如何解决这个问题？ 我想在这里创建一个详尽的解决方案列表。如果您知道跨浏览器兼容性问题，请指出这些问题。 解决方案1 ​​ 浮动父级。 < div style =float：left;> < div style =float：left;> Div 1< / div> < div style =float：left;> Div 2< / div> < / div> 优点：语义代码。 Cons ：您可能不总是希望父浮动。即使你做，你浮动父母的父母，等等吗？ 解决方案2 给父级显式高度。 < div style =height：300px;> < div style =float：left;> Div 1< / div> < div style =float：left;> Div 2< / div> < / div> 优点：语义代码。 缺点：不灵活 - 如果内容改变或浏览器调整大小，布局将破裂。 解决方案3 在父元素内添加spacer元素，如下所示： < div& < div style =float：left;> Div 1< / div> < div style =float：left;> Div 2< / div> < div class =spacerstyle =clear：both;>< / div> < / div> 优点：直接编码。 Cons ：不是语义; 解决方案4 将父项设置为 overflow：auto 。 < div style =overflow：auto;> < div style =float：left;> Div 1< / div> < div style =float：left;> Div 2< / div> < / div> 优点：不需要额外的div。 缺点：看起来像一个黑客 - 这不是溢出属性的声明目的。 评论？其他建议？ 解决方案 解决方案1： unobtrusive方法似乎是这样： 演示： http： //jsfiddle.net/SO_AMK/wXaEH/ HTML： < div class =clearfix> < div style =float：left;> Div 1< / div> < div style =float：left;> Div 2< / div> < / div> CSS： .clearfix :: after { content：; display：block; height：0; clear：both; } 使用一些CSS定位，甚至不需要添加类到父 DIV 。 这个解决方案向后兼容IE8，所以你不需要担心老 解决方案2： 已建议对解决方案1进行修改，如下： / p> 演示： http://jsfiddle.net/wXaEH/ 162 / HTML： < div class =clearfix> < div style =float：left;> Div 1< / div> < div style =float：left;> Div 2< / div> < / div> CSS： .clearfix :: after { content：; display：block; height：0; clear：both; * zoom：expression（this.runtimeStyle ['zoom'] ='1'，this.innerHTML + ='< div class =ie7-clear>< / div>'） } .ie7-clear { display：block; clear：both; } 此解决方案似乎向后兼容IE5.5，但未经测试。 / p> 解决方案3： 也可以设置 display：inline-block; / code>和 width：100％; 可模仿正常的块元素，但不会折叠。 演示： http://jsfiddle.net/SO_AMK/ae5ey/ CSS： .clearfix { display：inline-block; width：100％; } 此解决方案应向后兼容IE5.5， IE6。 Although elements like <div>s normally grow to fit their contents, using the float property can cause a startling problem for CSS newbies: if floated elements have non-floated parent elements, the parent will collapse.For example:<div> <div style="float: left;">Div 1</div> <div style="float: left;">Div 2</div></div>The parent div in this example will not expand to contain its floated children - it will appear to have height: 0.How do you solve this problem?I would like to create an exhaustive list of solutions here. If you're aware of cross-browser compatibility issues, please point them out.Solution 1Float the parent.<div style="float: left;"> <div style="float: left;">Div 1</div> <div style="float: left;">Div 2</div></div>Pros: Semantic code.Cons: You may not always want the parent floated. Even if you do, do you float the parents' parent, and so on? Must you float every ancestor element?Solution 2Give the parent an explicit height.<div style="height: 300px;"> <div style="float: left;">Div 1</div> <div style="float: left;">Div 2</div></div>Pros: Semantic code.Cons: Not flexible - if the content changes or the browser is resized, the layout will break.Solution 3Append a "spacer" element inside the parent element, like this:<div> <div style="float: left;">Div 1</div> <div style="float: left;">Div 2</div> <div class="spacer" style="clear: both;"></div></div>Pros: Straightforward to code.Cons: Not semantic; the spacer div exists only as a layout hack.Solution 4Set parent to overflow: auto.<div style="overflow: auto;"> <div style="float: left;">Div 1</div> <div style="float: left;">Div 2</div></div>Pros: Doesn't require extra div.Cons: Seems like a hack - that's not the overflow property's stated purpose.Comments? Other suggestions? 解决方案 Solution 1:The most reliable and unobtrusive method appears to be this:Demo: http://jsfiddle.net/SO_AMK/wXaEH/HTML: <div class="clearfix"> <div style="float: left;">Div 1</div> <div style="float: left;">Div 2</div></div>​CSS: .clearfix::after { content: " "; display: block; height: 0; clear: both;}​With a little CSS targeting you don't even need to add a class to the parent DIV.This solution is backwards compatible to IE8 so you don't need to worry about older browsers failing.Solution 2:An adaptation on solution 1 has been suggested and is as follows:Demo: http://jsfiddle.net/wXaEH/162/HTML: <div class="clearfix"> <div style="float: left;">Div 1</div> <div style="float: left;">Div 2</div></div>​CSS: .clearfix::after { content: " "; display: block; height: 0; clear: both; *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );}.ie7-clear { display: block; clear: both;}This solution appears to be backwards compatible to IE5.5 but is untested.Solution 3:It's also possible to set display: inline-block; and width: 100%; to emulate a normal block element while not collapsing.Demo: http://jsfiddle.net/SO_AMK/ae5ey/CSS: .clearfix { display: inline-block; width: 100%;}This solution should be backwards compatible to IE5.5 but has only been tested in IE6. 这篇关于你如何让父母的浮动元素不崩溃？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！