父元素没有被撑开塌陷问题解决方案
分类:实例代码
父元素没有被撑开塌陷问题解决方案属于前端实例代码,有关更多实例代码大家可以查看。
在布局中,有可能会出现这样的现象,就是子元素没有把父元素撑开,父元素出现塌陷现象,这个问题基本上都是由没有清除浮动造成的,网上的分析还是海量的,不过这里还是再做一下简单介绍,希望能够给需要的朋友带来一定的帮助。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> #box{ width:400px; border:5px solid red; } #left{ width:100px; height:50px; background:blue; float:left } #right{ width:100px; height:50px; background:#609; float:right } </style> </head> <body> <div id="box"> <div id="left"></div> <div id="right"></div> </div> </body> </html>
从上面的代码表现可以看出父元素出现了塌陷现象,就是因为子元素采用了浮动,但是没有清除。
解决方案如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> #box{ width:400px; border:5px solid red; overflow:hidden; } #left{ width:100px; height:50px; background:blue; float:left } #right{ width:100px; height:50px; background:#609; float:right } </style> </head> <body> <div id="box"> <div id="left"></div> <div id="right"></div> </div> </body> </html>
在父元素上添加了overflow:hidden实现了清除浮动的效果,当然清除浮动方式有很多中。
更多相关内容可以参阅css清除浮动的方式汇总一章节。
父元素没有被撑开塌陷问题解决方案,这样的场景在实际项目中还是用的比较多的,关于父元素没有被撑开塌陷问题解决方案就介绍到这了。