为什么要清除浮动?

为什么要清除浮动?

http://img1.sycdn.imooc.com//climg/5ec6131b09dec2bb03470422.jpg

不知道为什么要清除浮动,而且这段清除浮动的代码看不懂!

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
好帮手慕言 2020-05-22 18:56:23

同学你好,使用after伪类清除浮动带来的影响,只写after伪类即可,before是可以不写的。老师写上可能是和老师的编码习惯有关。

祝学习愉快~

好帮手慕言 2020-05-22 16:12:15

同学你好,如果添加伪元素,需要配合content属性才可以添加上。

可以参考下方的例子:

http://img1.sycdn.imooc.com//climg/5ec789dc09098d4a06010581.jpg

没有添加content,通过检查元素查看,伪元素没有添加上,如下:

http://img1.sycdn.imooc.com//climg/5ec788ff0923e87c04240272.jpg

添加上content之后,伪元素添加上了:
http://img1.sycdn.imooc.com//climg/5ec789280943c78d02700181.jpg

这里不需要在伪元素中添加内容,content直接设置为空即可

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

  • 老师这里为什么是在clearfix、container、row的前后都添加空内容,而不是只在前面或者后面添加?
    2020-05-22 17:05:06
好帮手慕粉 2020-05-21 14:12:16

同学你好,关于同学的问题回答如下:

1、因为每一列都设置了浮动,清除浮动是为了避免对后面的元素造成影响。我们先看看这个的布局,第一行设置了margin-bottom,与第二行有一定的间隙:

http://img1.sycdn.imooc.com//climg/5ec61a71092b31c318590599.jpg

但是如果把清除浮动的内容去掉,这一行就没有了高度:

http://img1.sycdn.imooc.com//climg/5ec61aab0992e09014830433.jpg

在实际应用中,如果前面的元素浮动后,会对后面的布局造成影响,那么我们就要去清除其浮动。

2、这段的代码就是通过给父元素设置伪类,来清除浮动。我们在第一阶段有详细的讲解,同学可以去复习下:https://class.imooc.com/lesson/756#mid=18862

如果我的回答帮助了你,欢迎采纳,祝学习愉快~

  • 为什么要在clearfix、container和row的前后都添加空内容呢?
    2020-05-22 15:03:21
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师