博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css#原生#清除浮动影响2(对父级元素的影响)
阅读量:3951 次
发布时间:2019-05-24

本文共 301 字,大约阅读时间需要 1 分钟。

在这里插入图片描述在这里插入图片描述蓝色边框塌陷了,没被子元素撑起来

解决高度塌陷的方案:一种方法:

直接在高度塌陷的父元素的最后,添加一个空白的 div
这个 div 没有浮动,(他会跑到父元素的上面,还不能撑开父元素),然后对其清除浮动(他就会跑到子元素的下面),就可以撑开父元素了。

在这里插入图片描述在这里插入图片描述

在这里插入图片描述

然后就清除浮动了。

在这里插入图片描述

在这里插入图片描述

这里可以用一个伪元素选择器:是伪元素,不是伪类

.float::after 指的是 子元素的最后一个元素。
在这里插入图片描述
这里插入了一个元素,清除了前面的浮动,使得父级塌陷有撑开了。

总结:

标准模板:

我设置了左浮动 float: left
我是页脚,但是我也设置了左浮动。

转载地址:http://phuzi.baihongyu.com/

你可能感兴趣的文章
Reward HDU - 2647 (拓扑排序)
查看>>
最长子序列长度 (动态规划 O(N^2))
查看>>
最长子序列长度 (贪心+二分 O( Nlog(N) ))
查看>>
数塔 HDU - 2084 (简单的dp)
查看>>
超级楼梯 HDU - 2041 ( 简单的dp )
查看>>
Piggy-Bank HDU - 1114 ( 完全背包 )
查看>>
Knapsack problem FZU - 2214 ( 01背包 )
查看>>
瞌睡 (网易笔试题)
查看>>
1009 说反话 (20 分)
查看>>
1010 一元多项式求导 (25 分)
查看>>
1011 A+B 和 C (15 分)
查看>>
1012 数字分类 (20 分)
查看>>
1013 数素数 (20 分)
查看>>
1014 福尔摩斯的约会 (20 分)
查看>>
1015 德才论 (25 分)
查看>>
1016 部分A+B (15 分)
查看>>
1017 A除以B (20 分)
查看>>
1019 数字黑洞 (20 分)
查看>>
1032 挖掘机技术哪家强 (20 分)
查看>>
今夕何夕 HDU - 6112 ( 模拟 )
查看>>