css解决高度塌陷,div高度塌陷

　　所谓高度折叠是指当一个子元素被设置为浮动时，其父元素的高度将会丢失。由实际代码演示：

　　！DOCTYPE html lang= en head meta charset= UTF-8 meta http-equiv= X-UA-Compatible content= IE=edge meta name= viewport content= width=device-width，initial-scale=1.0 title document/title style main { width:100%；背景色：# ccc} .一个{ float:left；宽度：200px高度：200px背景色：天蓝色；} .两个{ float:右；宽度：200px高度：200px背景色：番茄；} section { width:400 px；高度：400px背景色：橙色；}/style/headbydymaindiv class= one /div div class= two /div/main section/section/body/html最初的效果是高度塌陷，底部的橙色模块会上移。这里有五种解决方案：

　　第一，为父元素设置一个固定的高度，虽然简单，但并不推荐，因为网页的内容是动态变化的，给定的高度不利于后期的内容添加。

　　将高度添加到主父对象，并将其设置为200像素。

　　相应的运行结果：

　　2.将父元素的溢出设置为不可见的值，这适用于子元素不溢出的情况。在这里设置overflow:hidden为main，效果同上。

　　相应的运行结果：

　　第三，使用clear属性清除浮动影响。

　　首先，在main中添加一个带有类名box的空div标记，然后在style中设置它的clear属性。效果同上。

　　相应的运行结果：

　　第四，使用after伪类向父类添加一个空的块级内容，并设置clear属性。

　　这种方法可以看作是第三种方法的优化，因为一个空标签实际上是多余的，可以在伪类之后添加。添加以下代码后，问题就可以解决了。

　　相应的运行结果：

　　动词（verb的缩写）直接使用clearfix类并引入以下代码

　　然后将clearfix类添加到main中。

　　相应的运行结果：

　　本文关于HTML5高崩溃问题的解决方案到此为止。更多相关HTML5的高折叠内容，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。