子元素浮动让父元素塌陷解决办法

最新推荐文章于 2022-12-03 11:18:51 发布

赵圆圆

最新推荐文章于 2022-12-03 11:18:51 发布

阅读量3.9k

点赞数 1

分类专栏： CSS 文章标签： html 文档 CSS 清除浮动伪类

CSS 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

父元素没有给固定高度，子元素设有固定的高度，但是父云素也没有被子元素的高度撑开。子元素浮动了，而浮动属性会使元素脱离文档流，即子元素设置float属性后，当前的html文档会当作元素不存在一样，所以可以看作父元素内根本没有内容，高度当然也就撑不开。
解决办法：
1.设置父元素float属性；这样，父元素也是脱离当前文档流，子元素和父元素一起脱离，并且子元素仍在父元素内，父元素内容不空了，所以高度会适应子元素高度。
2.不要浮动，子元素使用display:inline-block;
3.在最后一个设置浮动的子元素后加一个空div，清除浮动；
4.父元素设置overflow：hidden属性；
5 .使用after伪对象清除浮动；

推荐后面3种方法。

针对方案4还可以这样：
如果在父元素内要左右排列且不让父元素坍塌，可以这样改，将左边的子类设置为float，右边的子类设置为overflow：hidden属性。如下代码所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
    .left{
        float:left;
        width:200px;
        margin-right: 20px;
        background-color: #aaaaaa;
    }
        .parent{
            overflow: hidden;
            background-color: antiquewhite;
        }
        @media screen  and (max-width: 500px) {
            .left{
                float: none;
                width: auto;
                margin-right: 0;
                margin-bottom: 20px;
                background-color: #aaaaaa;
            }
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="left"><p>DEMO</p></div>
    <div class="right"><p>DEMO</p></div>
</div>
<p>DEMODEMODEMODEMO</p>
</body>
</html>

针对方案5，使用伪类来清除浮动：

.clearfix::after
{
    clear:both;
    content:"";
    display:block;
    height:0;
    visibility:hidden;
}

我们知道CSS语句中有一个:after伪选择符，就可以在父容器的尾部自动创建一个子元素，这正好符合我们的需要。
下面的代码参照了lifesinger的写法：

.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
}

“clearfix”是父容器的class名称，”content:”020”;”是在父容器的结尾处放一个空白字符，”height: 0;”是让这个这个空白字符不显示出来，”display: block; clear: both;”是确保这个空白字符是非浮动的独立区块。
但是，:after选择符IE 6不支持，也就是说上面的这段代码在IE 6中无效，这怎么办？
我们添加一条IE 6的独有命令”zoom:1;”就行了，这条命令的作用是激活父元素的”hasLayout”属性，让父元素拥有自己的布局。IE 6会读取这条命令，其他浏览器则会直接忽略它。

7.最终代码

.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
}
.clearfix {
zoom: 1;
}

8.附录什么是hasLayout
IE使用Layout概念来控制元素的尺寸和位置。如果一个元素有Layout，它就有自身的尺寸和位置；如果没有，它的尺寸和位置由最近的拥有布局的祖先元素控制。
在默认情况下，拥有Layout的元素包括：

<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>
（注意，<p>和<div>默认不拥有Layout。）
凡是具有以下CSS属性的元素，也会拥有布局：
position: absolute
float: left|right
display: inline-block
width: any value other than 'auto'
height: any value other than 'auto'
zoom: any value other than 'normal' （IE专用属性）
writing-mode: tb-rl（IE专用属性）
overflow: hidden|scroll|auto（只对IE 7及以上版本有效）
overflow-x|-y: hidden|scroll|auto（只对IE 7及以上版本有效）

hasLayout是IE特有的属性，不是CSS属性。可以用JavaScript函数hasLayout查看一个元素是否拥有Layout。如果有，这个函数就返回true；否则返回false。hasLayout是一个只读属性，所以无法使用Javascript进行设置。

赵圆圆

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
子元素浮动让父元素塌陷解决办法

父元素没有给固定高度，子元素设有固定的高度，但是父云素也没有被子元素的高度撑开。子元素浮动了，而浮动属性会使元素脱离文档流，即子元素设置float属性后，当前的html文档会当作元素不存在一样，所以可以看作父元素内根本没有内容，高度当然也就撑不开。解决办法： 1.设置父元素float属性；这样，父元素也是脱离当前文档流，子元素和父元素一起脱离，并且子元素仍在父元素内，父元素内容不空了，所以高度
复制链接

扫一扫