解决浮动元素导致的父容器高度塌陷问题-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_70521709/article/details/124685111

width: 20%;

background-color: green;

}

.right{

float: left;

width: 20%;

background-color: red;

}

haha

剧讲述了翼君擎苍向天族挑起战争，天族付出惨痛代价封印了擎苍，同年天孙夜华出世。七万年后擎苍逃出封印，青丘狐帝幺女白浅再次将擎苍封印，但却因此被封法力、记忆和容貌，落入凡尘与夜华相识、相恋，后被带入天宫。天宫中，爱慕夜华的素锦屡次陷害白浅，并让白浅误会夜华冷酷无情，继而又害白浅被挖双眼。白浅伤心欲绝，产子后

此时效果：

，显然，父容器的高度无法撑起来。

下边是解决方案：

1.首先第一种为父容器增加一个高度。如

.father{

border: 1px solid salmon;

background-color:#ddd;

height:300px; }height:300px;

}

父元素有高度，但是由于子元素没有设置，如上图所示。不推荐、

2.常用的方法之一，添加一个空的div。

在body中最后边增加

并添加样式：

.box{clear: both;}

效果如图：

3。父容器增加一个 overflow：hidden或者auto属性，这样会使里面的浮动元素恢复到容器中。

.father{

overflow: hidden;

border: 2px solid black;

background-color:gray;

}

效果如图：![](https://img-blog.youkuaiyun.com/20170227220420695?watermark/2/text/aHR0cD 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源徽信搜索公众号【编程进阶路】 ovL2Jsb2cuY3Nkbi5uZXQvcXFfMzE0NjkzNjk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

4.给父元素也设置呈浮动属性。这种写法虽然可以清楚浮动，但是会产生新的布局问题，父元素的同级或者上级元素又可能出现问题，所以不推荐使用；

5.增加一个尾元素,给容器增加一个看不见的尾元素来清除浮动。（比较好）

<body> <div class="father **clearfix"**> <div class="left"> 剧讲述了翼君擎苍向天族挑起战争，天族付出惨痛代价封印了擎苍，同年天孙夜华出世。七万年后擎苍逃出封印，青丘狐帝幺女白浅再次将擎苍封印，但却因此被封法力、记忆和容貌，落入凡尘与夜华相识、相恋，后被带入天宫。天宫中，爱慕夜华的素锦屡次陷害白浅，并让白浅误会夜华冷酷无情，继而又害白浅被挖双眼。白浅伤心欲绝，产子后 </div> <div class="right"> 剧讲述了翼君擎苍向天族挑起战争，天族付出惨痛代价封印了擎苍，同年天孙夜华出世。七万年后擎苍逃出封印，青丘狐帝幺女白浅再次将擎苍封印，但却因此被封法力、记忆和容貌，落入凡尘与夜华相识、相恋，后被带入天宫。天宫中，爱慕夜华的素锦屡次陷害白浅，并让白浅误会夜华冷酷无情，继而又害白浅被挖双眼。白浅伤心欲绝，产子后 </div> <div class="box"></div> </div> </body>clearfix">

设置一个classname，增加尾元素属性：

.clearfix:after{

content:" ";

display:" block";