CSS清除浮动的三个方法

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

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

【 tulaoshi.com - Web开发 】

  用空标签清除

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

.clr {clear: both;}
Left
Right

  使用 overflow 属性

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

  使用 :after (非 IE 浏览器)

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

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

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

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

延伸阅读
标签: Web开发
在进行浮动布局时,大多数人都深知,在必要的地方进行浮动清理:div style=clear:both;/div。 例如: div style=background:#666;       div style=float:left; width:30%; height:40px;background:#EEE; Some Content/div /div 此时预览此代码,我们会发现最外层的父元素float container,并没有显示。这...
标签: Web开发
这篇文章将会提到三种简单、但很有效的设计技术来指导你正确地利用css改进网站的设计,以使网站能在大多数搜索引擎中的排名靠前。 首先介绍一下什么是css。css是层叠式样式表的意思,是一种把实际内容与陈述代码分离的方法。通常,网站设计中会建立一整套的css样式标准,这些标准存储在一个扩展名为css的单独文件中。然后利用HTML链接标...
标签: 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规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父...

经验教程

91

收藏

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