CSS之高度塌陷问题1

来源:转载

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">.box1{/* * 为box1设置边框 * 宽度和父元素一样宽 * 高度被内容撑开 */border: 10px red solid;}.box2{width: 100px;height: 100px;background-color: blue;/* * 在文档流中父元素的高度是被子元素撑开的 * *//*为子元素设置浮动*/float: left;/* * 但为子元素设置浮动后,子元素会脱离文档流,此时父元素的高度塌陷 * * 由于父元素高度塌陷,则导致父元素下的元素向上移动,导致页面布局混乱 * * */}.box3{height: 100px;/*width: 100px;*/background-color: yellow;}</style></head><body><!--方法1、把父元素的高度写死,即固定高度。但是一旦高度写死,父元素的高度将不能自动适应子元素高度,故不建议--><div class="box1"><div class="box2"></div></div><div class="box3"></div></body></html>

效果图片:


分享给朋友:
您可能感兴趣的文章:
随机阅读: