css高度塌陷问题的解决方案

站长资源 2024/11/17 佚名

2 0 1

1. 高度塌陷

在文档流中，父元素的高度默认被子元素撑开，也就是说子元素多高，父元素就多高。但是，当为子元素设置浮动后，子元素会完全脱离文档流。此时，将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。
所以在开发中一定要避免出现高度塌陷的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    .box1{
        border: 10px solid red;
    }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2">a</div>
</div>
</body>
</html>

结果：父元素box1的高度被子元素box2的a内容撑开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    .box1{
        border: 10px solid red;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: greenyellow;
    }

    </style>
</head>
<body>
<div class="box1">
    <div class="box2">a</div>
</div>
</body>
</html>

结果：父元素的高度被子元素的高度100撑开。

若为子元素设置浮动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    .box1{
        border: 10px solid red;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: greenyellow;
        float: left;
    }
    .footer{
        height: 50px;
        background-color: pink;
    }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>
<div class="footer"></div>
</body>
</html>

结果：子元素浮动，父元素没有了高度。footer向上移动。

为父元素设置高度，避免塌陷：

.box1{
        border: 10px solid red;
        height: 100px;/* 设置父元素的高度*/
    }

结果：

但是当子元素的高度较高时，又会产生溢出的问题。父元素的高度一旦固定，父元素的高度将不能自动适应子元素的高度，所以这种方案不推荐使用：

  .box2{
        width: 100px;
        height: 200px;
        background-color: greenyellow;
        float: left;
    }

结果：

2. 解决塌陷问题

根据w3c的标准，在页面中的元素都有一个隐含的属性叫做Block Formatting Context, 简称BFC。该属性可以设置打开或者关闭，默认是关闭的。
当开启元素的BFC以后，元素将会具有如下的特征：
(1) 父元素的垂直外边距不会和子元素重叠
(2) 开启BFC的元素不会被浮动元素所覆盖
(3) 开启BFC的元素可以包含浮动的子元素

如何开启元素的BFC:

设置元素浮动

使用这种方式，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题

设置元素绝对定位

也有上面的问题

设置元素为inline-block

可以解决问题，但是会导致宽度丢失，不推荐使用这种方式

将元素的overflow 设置为一个非visible的值

推荐方式：将父元素overflow设置为hidden，是副作用最小的开启BFC的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    .box1{
        border: 10px solid red;
        overflow: hidden;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: greenyellow;
        float: left;
    }
    .footer{
        height: 50px;
        background-color: pink;
    }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>
<div class="footer"></div>
</body>
</html>

结果：

注意：但是在IE6中是不支持BFC的。所以引入hasLayout。

在IE6中有另一个隐含的属性叫做hasLayout,该属性的作用和BFC类似，所以IE6浏览器可以通过开hasLayout来解决问题。开启方式有很多，但是副作用最小的方式是：直接将元素的zoom设置为1即可。

zoom表示放大的意思，后边跟一个数值，写几就是将元素放大几倍。

zoom:1 表示不放大元素，但是通过该样式可以开启hasLayout。

zoom这个样式，只在IE中支持，其他浏览器都不支持。

zoom: 1;/* 兼容ie6*/
overflow: hidden;/* 兼容非ie6*/

css,高度塌陷

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“css高度塌陷问题的解决方案”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月17日

css高度塌陷问题的解决方案

CSS实现隐藏滚动条并可以滚动内容效果(三种方式)

使用 CSS3 中@media 实现网页自适应的示例代码

评论“css高度塌陷问题的解决方案”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接