为什么要清除浮动?

来源:3-1 实现栅格系统--基础部分

weixin_慕前端6235132

2020-05-21 13:36:07

http://img.mukewang.com/climg/5ec6131b09dec2bb03470422.jpg

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

写回答

3回答

好帮手慕言

2020-05-22

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

祝学习愉快~

0

好帮手慕言

2020-05-22

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

可以参考下方的例子:

http://img.mukewang.com/climg/5ec789dc09098d4a06010581.jpg

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

http://img.mukewang.com/climg/5ec788ff0923e87c04240272.jpg

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

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

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

0
heixin_慕前端6235132
h 老师这里为什么是在clearfix、container、row的前后都添加空内容,而不是只在前面或者后面添加?
h020-05-22
共1条回复

好帮手慕粉

2020-05-21

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

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

http://img.mukewang.com/climg/5ec61a71092b31c318590599.jpg

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

http://img.mukewang.com/climg/5ec61aab0992e09014830433.jpg

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

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

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

0
heixin_慕前端6235132
h 为什么要在clearfix、container和row的前后都添加空内容呢?
h020-05-22
共1条回复

0 学习 · 6815 问题

查看课程