Float引起div自适应高度无效的解决办法。
一、当子元素在正常的文档流中时
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三生草</title> <style type="text/css"> #ss{ border:2px solid yellow; width:400px; } #sr{ background:red; width:200px; height:100px; margin:0 auto; } </style> </head> <body> <div id="ss"> <div id="sr"></div> </div> </body> </html> 上面的父元素的高度随着子元素的高度变大而变大。当子元素在正常的文档流中。所以子元素能够将父元素撑开。即父元素的高度可根据子元素的高度自适应。效果图如下：
二、当子元素加上浮动时
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三生草</title> <style type="text/css"> #ss{ border:2px solid yellow; width:400px; } #sr{ background:red; width:200px; float:left; height:100px; margin:0 auto; } </style> </head> <body> <div id="ss"> <div id="sr"></div> </div> </body> </html> 上面的父元素没有被子元素撑开，即父元素没有根据子元素自动调节高度，这是因为子元素float属性设置为left，从而脱离了文档流。效果图如下：
三、Float引起div自适应高度解决办法。
方法一：如果父元素没有设置高度，那么我们可以在父元素中添加：“overflow:hidden;”来清除浮动，即可通过浮动元素撑开父元素。 #ss{ border:2px solid yellow; width:400px; overflow:hidden; } #sr{ background:red; width:200px; float:left; height:100px; margin:0 auto; }
效果图如下：
方法二：如果父元素固定了高度，但是还要实现高度的自适应。那么可以添加如下代码即可： #ss{ border:2px solid yellow; width:400px; height:200px; min-height:200px; height:auto!important; } #sr{ background:red; width:200px; float:left; height:100px; margin:0 auto; }
效果图如下：
转载请注明原文地址: https://www.6miu.com/read-2822.html
