CSS清除浮动的三个方法

2016-02-19 19:46 2 1 收藏

今天图老师小编要向大家分享个CSS清除浮动的三个方法教程,过程简单易学,相信聪明的你一定能轻松get!

【 tulaoshi.com - Web开发 】

  用空标签清除

.clr {clear: both;}
Left
Right

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

  使用 overflow 属性

#layout {overflow:auto; zoom:1;}
Left
Right

  使用 :after (非 IE 浏览器)

#layout:after{
display: block;
clear: both; content: '';
visibility:hidden; height: 0;
}
Left
Right

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

  注:使用 :after 需要注意几点,设置高度为零(height: 0;);content 是必须的,但其值可以为空。

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

延伸阅读
标签: Web开发
课程关键词:清除浮动Clear 还记得第二课我们做的例子的效果么?最后效果是,红色方块和蓝色方块都处于一行,我们使用Float:left,打击了块状元素的霸道即块状元素不允许其他元素和它处于同一行。我们将红色方块的CSS代码中加入了Float:left;后,红色方块终于允许蓝色方块和它处于同一行。如图: 我们换一种方法表达上面的意思,因为红色...
标签: Web开发
CSS 使用浮动会造成布局的混乱,通常清除浮动的方法是,利用一个如下样式的空 Div: div class="clear"/div.clear{clear:both;} 更为优良的 CSS 代码是: .clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clear{zoom:1;} 这个方法目前已经广泛使用,淘宝、口碑,都是这种用法。通...
标签: Web开发
css浮动 结论,非浮动元素可以为后面的浮动元素定位, 但是 浮动元素无法再为其后的非浮动元素定位。 No-float A + Float B + No-float C c和b 会按照A的边界进行定位, !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" HTMLHEADTITLECSS TEST/TITLE st...
标签: Web开发
这篇文章将会提到三种简单、但很有效的设计技术来指导你正确地利用css改进网站的设计,以使网站能在大多数搜索引擎中的排名靠前。 首先介绍一下什么是css。css是层叠式样式表的意思,是一种把实际内容与陈述代码分离的方法。通常,网站设计中会建立一整套的css样式标准,这些标准存储在一个扩展名为css的单独文件中。然后利用HTML链接标...
标签: Web开发
按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父...

经验教程

274

收藏

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