文章目录
前言：文章内容总于 牛客网的css练习—— 浮动和清除浮动， 以下解决方法来自讨论区。
问题分析：
使用了float之后，父元素没有高度，内容由子元素撑开，子元素浮动后，导致父元素高度为0，造成高度塌陷。
解决方法（4个）：
1. 可以给父盒子添加一个高度
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.wrap{
/* height: 200px; */
height: 100px;
/* 父元素设置高度 */
background-color: orange;
}
.left {
width: 100px;
height: 100px;
/*补全代码*/
float:left;
background-color: red;
}
.right {
width: 100px;
height: 100px;
/*补全代码*/
float:left;
background-color: red;
}
</style>
</head>
<body>
<div class='wrap'>
<div class='left'></div>
<div class='right'></div>
</div>
</body>
</html>
2. 可以添加属性 overflow:hidden
但是不能和定位同时使用,因为超出的尺寸的会被隐藏,可能会影响页面的布局
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.wrap{
background-color: orange;
overflow: hidden;
}
.left {
width: 100px;
height: 100px;
/*补全代码*/
float:left;
background-color: red;
}
.right {
width: 100px;
height: 100px;
/*补全代码*/
float:left;
background-color: red;
}
</style>
</head>
<body>
<div class='wrap'>
<div class='left'></div>
<div class='right'></div>
</div>
</body>
</html>
3. 可以通过伪元素after的方式
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.wrap{
background-color: orange;
}
/*
.wrap::after {
content:'';
display:block;
clear:both;
}
.left {
width: 100px;
height: 100px;
/*补全代码*/
float:left;
background-color: red;
}
.right {
width: 100px;
height: 100px;
/*补全代码*/
float:left;
background-color: red;
}
</style>
</head>
<body>
<div class='wrap'>
<div class='left'></div>
<div class='right'></div>
</div>
</body>
</html>
4. 添加一个空的块级标签，添加clear：both；
在子元素的最后添加一个空的div,设置clear:both属性
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.wrap{
background-color: orange;
}
.left {
width: 100px;
height: 100px;
/*补全代码*/
float:left;
background-color: red;
}
.right {
width: 100px;
height: 100px;
/*补全代码*/
float:left;
background-color: red;
}
/*在子元素的最后添加一个空的div,设置clear:both属性*/
.closeFloat{
clear:both;
}
</style>
</head>
<body>
<div class='wrap'>
<div class='left'></div>
<div class='right'></div>
<!-- 在子元素的最后添加一个空的div,设置clear:both属性 -->
<div class="closeFloat"></div>
</div>
</body>
</html>