当前位置： 移动技术网 > IT编程>网页制作>CSS > 解决浮动引起的高度塌陷

解决浮动引起的高度塌陷

2019年02月21日  | 移动技术网IT编程  | 我要评论

当不给父元素设置宽高时，父元素的宽高会被子元素的内容撑开。但是当子元素设置浮动属性后，子元素会溢出到父元素外，父元素的宽高也不会被撑开了，称之为“高度塌陷”。

<div class="container">
    <div class="box_1 float">box 1</div>
    <div class="box_2 float">box 2</div>
</div>
.container {
    border: 3px solid #8990d5;
}
.box_1 {
    height: 100px;
    width: 100px;
    text-align: center;
    background-color: #ffb5bf;
}
.box_2 {
    height: 100px;
    width: 100px;
    text-align: center;
    background-color: #94e8ff;
}
.float {
    float: left;
}

解决办法：

1.给父元素设置 overflow

添加 overflow 不仅减少了代码量，还不存在语义化的问题，但是也可能因为内容增加导致超出尺寸的内容被隐藏。仅设置 overflow: hidden; 为什么就能清除浮动呢？
这里要引入一个概念：bfc（block formatting context），块级格式化上下文。bfc 的一个特性便是可以包含浮动元素，设置 overflow 为 hidden 满足了创建一个 bfc 的条件，其实就是创建 bfc，利用 bfc 固有特性清除浮动。
.container{ 
　　overflow: hidden; 
　　zoom: 1; /* 兼容 ie6、ie7*/ 
}

2.使用 after 伪元素

:after 伪元素表示在元素之后添加内容。

该方法本质是在末尾添加一个看不见的块元素来清除浮动。这个方法不存在语义化的问题，是目前的主流清除浮动的方法。

.container::after {
    content: '';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}
.container {
    border: 3px solid #ccc;
    zoom: 1;   /* 兼容 ie6、ie7 */
}

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网