CSS之高度塌陷问题解决方案

来源：互联网发布：长宏数据编辑：程序博客网时间：2024/06/05 20:39
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">.box1{border: 10px red solid;/* * 根据W3C的标准，在页面中都有一个隐含的属性叫Block Formatting Context * 简称 BFC，该属性可以设置打开或者关闭。默认是关闭的。 * 当开启元素的BFC后，元素将会有一下特性： * 1、父元素的外边距不会和子元素重叠 * 2、开启BFC的元素不会被浮动元素所覆盖 * 3、父元素开启BFC可以包含浮动的子元素 * 如何开启BFC * 1、开启元素浮动 * -虽然可以撑开父元素，但是宽度丢失，这种方式也会使下方元素上移 * 2、设置元素绝对定位 * --虽然可以撑开父元素，但是宽度丢失，这种方式也会使下方元素上移 * 3、设置元素为inline-block * -可以解决问题，但是会导致宽度丢失，不推荐使用 * 4、将父元素的overflow设置为非visible的值 * -推荐方式 *//* *但在IE6及以下的浏览器并不支持BFC，但是含有另一个隐含的属性叫做hasLayout * 该属性作用和BFC类似，所以我们可以开启hasLayout来解决问题 * 开启方式有很多种，我们直接选择一种副作用最小的 * 直接将元素的zoom属性设置为1即可  *//*方法1*//*float: left;*//*方法2*//*position: absolute;*//*方法3*//*display: inline-block;*/overflow: auto;/* * zoom是放大的意思，数字为几就是放大几倍 *//*zoom : 1*/}.box2{width: 100px;height: 100px;background-color: blue;float: left;}.box3{height: 100px;/*width: 100px;*/background-color: yellow;}</style></head><body><div class="box1"><div class="box2"></div></div><div class="box3"></div></body></html>
效果：
阅读全文
0 0