CSS之高度塌陷问题1

来源：互联网发布：注册淘宝食品店铺流程编辑：程序博客网时间：2024/05/22 04:23

<!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>

效果图片：

阅读全文

0 0