CSS教程:伪清除浮动

贾正京

贾正京

2016-02-19 23:57

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享CSS教程:伪清除浮动,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

一个多月前总结了《清理浮动的全家》,当时看了之后没什么新鲜的东西也就忽略了,今天偶然又翻到那篇文章,想到了另外一个的方法(N久前在书店翻到的),在网上没看到有人提起过,写出来大家一起讨论下。

HTML:

CSS:

Firefox下效果:

 

可见,ul的黄色背景并没有显示出来。

重点来了:

在CSS理加上如下代码

效果如下:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/) 

缺点:

浮动算是清除成功了,但是宽度没有像display:block那样撑开,需要指定一个宽度:

 

总结:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

浮动带来的一个问题就是清除浮动,虽然有很多方法来解决,但最根本的解决方法还是不要滥用浮动,比如有些情况下完全可以用

来实现。

展开更多 50%)
分享

猜你喜欢

CSS教程:伪清除浮动

Web开发
CSS教程:伪清除浮动

CSS实例教程:清除浮动Clear

Web开发
CSS实例教程:清除浮动Clear

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

通过CSS实例实现清除浮动

Web开发
通过CSS实例实现清除浮动

清除网页浮动CSS的做法

Web开发
清除网页浮动CSS的做法

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS:清除浮动的最优方法

Web开发
CSS:清除浮动的最优方法

更简洁的CSS清除浮动方法

Web开发
更简洁的CSS清除浮动方法

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

轻松搞定IE的CSS制作网页技巧3则

轻松搞定IE的CSS制作网页技巧3则

绿鹰一键还原工具怎么用与使用教程

绿鹰一键还原工具怎么用与使用教程
下拉加载更多内容 ↓