能不能在详细讲解下这个清除浮动为啥要这么写啥意思

陈立天 2020-08-24

源自：响应式布局 3-1 实现栅格系统--基础部分

30

收起

5回答

好帮手慕码 2020-08-25 10:34:36

同学你好，解答如下：

1、display：table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。如下代码：

意思是给元素添加一个伪类，这个伪类的作用是清楚浮动。同学记住这使用方法即可。

2、是给父级添加了内边距，里面的图片会相应减小。

3、是为了解决嵌套问题。例如添加图片部分，是需要有内边距的：

而添加col3这种，是需要顶格显示的：

4、实现过程可以参考另一个问题：

https://class.imooc.com/course/qadetail/250140

另，如果同学问题比较多的话，建议多新建几个提问分开提问，这样可以分类型、分章节这样来归纳哦！

祝学习愉快~

提问者陈立天 2020-08-24 21:07:52

老师我画了个图大概是这个意思么老师想表达的是

提问者陈立天 #1

诶越整越迷糊搞不懂了

2020-08-24 22:05:23

提问者陈立天 2020-08-24 20:31:22

老师想要表达的是这个意思把这上下相互独立上面有padding的效果而下面是填满的

提问者陈立天 #1

但是我不明白23：25-23：45 这里既然给两个row设置了margin 并且也给container都设置了padding 这为啥第二个就和第一个row相互独立呢？为啥第一个row就有padding的效果而第二个就没有padding呢

2020-08-24 20:38:30

提问者陈立天 2020-08-24 20:10:22

还有一个问题：

这里老师用上面的案例为了给他加上左右padding的效果

然后老师注释了上面的，写了下面的嵌套的新的row里面的col有padding

然后经过一些代码之后就这样了

老师想表达的意思是？那个上面嵌套有图片的是有padding的情况会影响下面的嵌套也会有padding？所以为了解决这个问题就用了这些的代码？那写完这些代码之后我想知道上面图片的嵌套是用padding的还是没padding的到底是不是我理解这个意思？

提问者陈立天 2020-08-24 19:59:22

另外，这里加了padding 是把图片变小了还是裁剪了？

相似问题

可不可以在content上清除浮动呢？

再讲解一下一个隐藏超出部分内容的属性为啥能够清除浮动呢？

清除浮动是什么意思

老师我不太理解 .clearfix 能详细的讲解一下么？

何时该清除浮动

登录后可查看更多问答，登录/注册

3.WebAPP开发与小程序

参与学习人
提交作业 622 份
解答问题 6815 个

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

本课精华内容

问答作业

代码分享-模仿高德官网效果做的

129 1

为什么图片这么大

27 15

老师帮我看下为什么谷歌浏览器点不了进度条没次点击都会重新播放用火狐浏览器就是可以的

34 14

这两个公式怎么推导出来的？

40 13

laoshi老师

57 13

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载