CSS教程:伪清除浮动

2016-02-19 23:57 3 1 收藏

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

【 tulaoshi.com - Web开发 】

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

HTML:

CSS:

Firefox下效果:

 

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

重点来了:

在CSS理加上如下代码

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

效果如下:

 

缺点:

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

 

总结:

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

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

来实现。

来源:http://www.tulaoshi.com/n/20160219/1630922.html

延伸阅读
标签: Web开发
用空标签清除 .clr {clear: both;} Left Right 使用 overflow 属性 #layout {overflow:auto; zoom:1;} Left Right 使用 :after (非 IE 浏览器) #layout:after{ display: block; clear: both; content: ''; visibility:hidden; height: 0; } Left Right 注:使用 :after 需要注意几点,设置高度为零(height: 0...
标签: Web开发
起源: .clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}.clearfix { display: inline-table; }/* Hides from IE-mac \*/* html .clearfix { height: 1%; }.clearfix { display: block; }/* End hide from IE-mac */ 说明: *对大多数符合标准的浏览器应用第一个声明块...
标签: Web开发
在CSS中,模式(pattern)匹配规则决定那种样式规则应用于文档树(document tree)的哪个元素。这些模式叫着选择符(selector)。 一条CSS规则(rule)是选择符{属性:值;属性:值;}(selector {property:value;property1:value2;}),即选择符决定了{}中的声明(declaration)匹配哪个元素。 类:在HTML中当表现class属性的时候,人们可以用点...
标签: Web开发
按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种做法 就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大...
标签: Web开发
按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容...

经验教程

875

收藏

6
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部