css别忘记清除浮动clear:both_经验交流

用空标签清除
.clr {clear: both;}

<div id="layout">
    <div id="left">Left</div>
    <div id="right">Right</div>
    <p class="clr"></p>
</div>
使用 overflow 属性
#layout {overflow:auto; zoom:1;}

<div id="layout">
    <div id="left">Left</div>
    <div id="right">Right</div>
</div>
使用 :after (非 IE 浏览器)
#layout:after{
    display: block;
    clear: both; content: "";
    visibility:hidden; height: 0;
}

<div id="layout">
    <div id="left">Left</div>
    <div id="right">Right</div>
</div>注:使用 :after 需要注意几点,设置高度为零(height: 0;);content 是必须的,但其值可以为空

时间: 2024-11-08 22:14:41

css别忘记清除浮动clear:both_经验交流的相关文章

清除浮动clear:both的应用详解

在CSS中我们会经常要用到"清除浮动"Clear,比较典型的就是clear:both; CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边.这个属性是用来控制float属性在文档流的物理位置的. 当属性设置float(浮动)时,其所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清除. 比如:<p style="f

css 两种清除浮动经典实例代码

一.使用空标签清除浮动 <style type="text/css"> <!–     *{margin:0;padding:0;}     body{font:36px bold; color:#f00; text-align:center;}     #layout{background:#ff9;}     #left{float:left;width:20%;height:200px;background:#ddd;line-height:200px;}   

CSS文字截取功能实现代码_经验交流

好处是: 兼容IE,firefox,Opera; 有利于内容完整性;有利于SEO; 无需后台程序处理; 可以在前台随时调节要截取的长度. 不好的地方: 不能自动判断截取长度,当字符很短的时候在Firefox中也会生成后面的省略符号. 另外在设置截取宽度的时候,要注意,尽量让文字截取完整. Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

重置默认样式 css reset第1/2页_经验交流

我在HTML下的默认样式中讲到,一些标签元素在HTML下有一个默认属性值,我们在写css页面的时候,为了避免在css中重复定义它们,我们需要重置默认样式(css reset).每个人的用法和写法都不一样.找到一篇关于css reset的调查文章, 可以看看国外使用css reset的比例调查.这里有一篇总结css reset比较全面的文章,列举了多种css reset的写法,可以看看. 译文地址查看 原文地址查看 接下来我也查看了国内的两个网站,用Firebug按F12看看他们的css rese

彻底弄懂CSS盒子模式系列教程集合_经验交流

blueidea终于可以出点让人惊呀的东西了,一直对clear和position不太理解,没想到这次的系列教程全给提及到了,不错,赞一下. 彻底弄懂CSS盒子模式之一彻底弄懂CSS盒子模式之二彻底弄懂CSS盒子模式之三彻底弄懂CSS盒子模式之四彻底弄懂CSS盒子模式之五

ul+li及css制作韩国风格菜单代码_经验交流

CSS Templates Free Download CSS WebSites Showcase CSS Web Design Article

css代码优化的12个技巧_经验交流

1.ID 规则2.Class 规则3.标签规则4.通用规则对效率的普遍认识是从Steve Souders在2009年出版的<高性能网站建设进阶指南>开始,虽然该书中罗列的更加详细,但你也可以在这里查看完整的引用列表,也可以在谷歌的<高效CSS选择器的最佳实践>中查看更多的细节.本文我想分享一些我在编写高性能CSS中用到的简单例子和指南.这些都是受到MDN 编写的高效CSS指南的启发,并遵循类似的格式. 一.避免过度约束  一条普遍规则,不要添加不必要的约束. 复制代码 代码如下:

CSS控制图片大小-适应宽度_经验交流

不知道家有没有遇到过这样的情况:在CSS控制图片大小时,如果把图片的宽度写死,比如 img{width:500px;} ,固然,如果图片宽度大于500px可以很好的控制它不让它过大,但如果图片宽度小于500px,比如说只有100px时,刚才的写法会把这张图扩大5倍显示,显然,这不是我们想看到的.     那么,CSS如何可以区分对待这些图片设置大小呢?很简单,请看:  复制代码 代码如下: img{width:expression(this.width>500?"500px":t

css import与link的区别_经验交流

看到一些网站的页中大部分是这样写的 <style type="text/css" media="screen"> @import url("http://www.jb51.net/home/css/global/v2.0.css?t=20070518.css"); </style> 而很多网站使用的都是link <link rel="stylesheet" rev="stylesheet