核心提示:CSS之解决高度塌陷问题(三)。htmlheadmeta charset=UTF-8title/titlestyle type=text/css.box1{border: 1px solid red;...
CSS之解决高度塌陷问题(三)。
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ border: 1px solid red; } .box2{ width: 100px; height: 100px; background-color: blue; float: left; } /* * 解决高度塌陷方案二 * 可以在高度塌陷的父元素的最后,添加一个空白的p * 然后对其清除浮动,这样就可以通过这个空白的p来撑开父元素 */ .clear{ clear: both; } </style> </head> <body> <p class="box1"> <p class="box2"></p> <p class="clear"></p> </p> </body> </html>
效果: