清除浮动无效

首页课程实战体系课手记专栏慕课教程

清除浮动无效

来源：5-4 编程练习

大大大大丶大海

2020-05-13 22:11:08

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

*{

padding: 0px;

margin: 0px;

background-color: red;

}

.content{

/*float: left;*/

background-color: yellow;

width: 800px;

margin: 0px auto;

}

.div{

background-color: red;

float: left;

margin: 20px 10px 10px 10px;

}

.text{

text-align: center;

}

img{

vertical-align: bottom;

}

.first{

margin-left: 20px;

}

.clearfix:after{

content: "";

visibility: hidden;

height: 0px;

display: block;

clear: both;

}

.clearDiv{

clear: both;

}

</style>

</head>

<body>

<div class="content">

<div class="div first">

<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">

<div class="text">欢迎来到慕课网学习新知识</div>

</div>

<div class="div">

<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">

<div class="text">欢迎来到慕课网学习新知识</div>

</div>

<div class="div">

<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">

<div class="text">欢迎来到慕课网学习新知识</div>

</div>

<div class="div first">

<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">

<div class="text">欢迎来到慕课网学习新知识</div>

</div>

<div class="div">

<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">

<div class="text">欢迎来到慕课网学习新知识</div>

</div>

<div class="div clearfix">

<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">

<div class="text">欢迎来到慕课网学习新知识</div>

</div>

</div>

</body>

</html>

使用伪元素清除浮动没有效果。直接在最后一个浮动元素后添加一个元素，设置clear:both是可以的。麻烦老师帮我看下是什么原因

写回答

1回答

好帮手慕小尤

好帮手慕小尤

2020-05-14

同学你好，是成功清除了浮动的，但只是清除了class为clearfix的浮动，并未清除其他模块的浮动，所以没有撑起父div的宽度，则建议同学清除class为content的浮动。修改后代码如下所示：

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

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

0

0 学习 · 16556 问题

相似问题

关于清除浮动的理解

回答 3

关于清除浮动

回答 1

回答 2

浮动清除问题

回答 1

视频中浮动取消

回答 1

打开慕课网App查看更多内容