php学习交流博客

好好写代码,好好痛她

2013年3月29日 #

OpenCart 程序结构与业务逻辑

OpenCart 是一套比较简单的MVC架构的php开源电子商务程序,完全没有Magento系统那么复杂。当然简单的代价是相应的功能和安全性能上的不足。不过OpenCart 系统中的一些经典设计还是很值得学习的。

OpenCart 首先将前台和后台完全分离开来,后台文件结构在admin/目录下;而前台在catalog/目录,入口文件index.php 在根目录下。各自都有一个可以做不同设置的配置文件config.php,在这里设置一些目录路径常量、数据库信息等。下面以OpenCart前台为例看看文件结构和MVC模式:

Catalog 前台

|

index.php 入口文件

  1. || 载入配置文件config.php
  2. || 检测是否新安装,是则跳转到 install/index.php
  3. || 载入启动类(/system/startup.php)(程序引擎system/engine / 核心类system/library / helper类system/helper)
  4. || 载入应用程序模块类(自动预加载的常用模块类,如customer 和tax 等)

|

启动引擎 Engine

  1. || 引入engine/registry.php 实例化下面的类并设置
  2. || 实例化加载器engine/loader.php,配置类library/config.php,数据库library/db.php 以及library/url.php
  3. || 获取商店Store和商店设置Settings,定义错误类

|

处理请求 request/response

  1. || 实例化library/request.php,library/response.php,library/cache.php, library/sesshion.php
  2. || 语言检测,设置语言类library/language.php
  3. || 其他常用预加载模块类的实例化和引入,如library/document.php,customer,tax等

|

前台控制器 /engine/front.php

  1. || addPreAction1: dispatch之前判断是否处于Maintenance Mode
  2. || addPreAction2: dispatch之前执行SEO url设置 catalog/controller/common/seo_url.php
  3. || request获取route 变量传递给Action,然后由前台控制器的dispatch方法处理该Action。

然后Dispatch 开始引入MVC 架构,整个过程由 Controller 贯穿:

Dispatch

|| Dispatch 请求的Action

Pre_Action

|| 预处理action 作为子 Action

Action

|| 继承自基础控制器类/engine/controller.php的类方法

默认index()方法

|| 通过Load Model(engine/loader.php)和相应的Model通信如catalog/model/catalog/category.php)

Model

|| Model:类方法执行sql语句,从数据库(library/db.php)中查询或操作数据,没有引入pdo等数据库抽象类

Controller:返回结果保存到$this->data[]数组

|| Controller 处理业务逻辑

View:$this->template 指定模板

|| View 负责内容呈现方式和样式。

Controller:$this->render接受$this->data[] 和$this->template

|| 传递回response

Controller:$this-response->setOutput()

|| 最后由response 输出

posted @ 2013-03-29 14:15 王吉刚 阅读(3228) | 评论 (0)编辑 收藏

2013年3月19日 #

三款免费的PHP加速器:APC、eAccelerator、XCache比较

一直想找一些关于PHP加速的文章,偶然看到杀客的这篇文章,感觉不错,分享给大家,再此感谢杀客。

一、PHP加速器介绍

        PHP加速器是一个为了提高PHP执行效率,从而缓存起PHP的操作码,这样PHP后面执行就不用解析转换了,可以直接调用PHP操作码,这样速度上就提高了不少。

        Apache中使用mod_php的请求、响应执行流程:

  1、Apache接收请求。
2、Apache传递请求给mod_php。
3、mod_php定位磁盘文件,并加载到内存中。
4、mod_php编译源代码成为opcode树。
5、mod_php执行opcode树。

       PHP加速器相应的就是第四步,它的目的就是防止PHP每次请求都重复编译PHP代码,因为在高访问量的网站上,大量的编译往往没有执行速度快呢?所以这里面有个瓶颈就是PHP的重复编译既影响了速度又加载了服务器负载,为了解决此问题,PHP加速器就这样诞生了。

二、PHP加速器安装与配置

        1、安装配置APC

             APC全称是Alternative PHP Cache,官方翻译叫”可选PHP缓存”,它是PHP PECL中的一个扩展,好像是facebook在使用它,下面开始安装(ubuntu环境): 
$wget http://pecl.php.net/get/APC-3.0.19.tgz
$tar xvzf APC-3.0.19.tgz
$cd APC-3.0.19/APC-3.0.19
$/usr/local/php/bin/phpize
$./configure –enable-apc –enable-apc-mmap –with-php-config=/usr/local/php/bin/php-config
$make
$sudo make install

下面我们再配置APC,因为我的PECL扩展路径改变了,所以我得移动下编译好的文件:
$sudo mv /usr/local/php/lib/php/extensions/no-debug-non-zts-20060613/apc.so /usr/local/php/lib/php/extensions/PECL

然后我们再编辑php.ini文件进行配置,请把下面的代码加入到php.ini中即可:
extension_dir = "/usr/local/php/lib/php/extensions/PECL"
extension = apc.so
; APC
apc.enabled = 1
apc.shm_segments = 1
apc.shm_size = 64
apc.optimization = 1
apc.num_files_hint = 0
apc.ttl = 0
apc.gc_ttl = 3600
apc.cache_by_default = on

     这样重启apache就会在phpinfo()信息中显示。

       2、安装配置eAccelerator

          eAccelerator的前身其实是truck-mmcache,因为开发truk-mmcache的人被Zend给招安了,所以开发eAccelerator的人继承了truk-mmcache的一些特性,设计出eAccelerator加速器。安装如下:
$wget http://jaist.dl.sourceforge.net/sourceforge/eaccelerator/eaccelerator-0.9.5.tar.bz2
$tar -jxf eaccelerator-0.9.5.tar.bz2
$cd eaccelerator-0.9.5
$/usr/local/php/bin/phpize
$./configure –enable-eaccelerator=shared –with-php-config=/usr/local/php/bin/php-config
$make
$sudo make install
$sudo mv /usr/local/php/lib/php/extensions/no-debug-non-zts-20060613/eaccelerator.so /usr/local/php/lib/php/extensions/PECL

将下面代码加入php.ini文件中
extension = eaccelerator.so
; eAccelerator
eaccelerator.shm_size = "16"
eaccelerator.cache_dir = "/tmp/eaccelerator"
eaccelerator.enable = "1"
eaccelerator.optimizer = "1"
eaccelerator.check_mtime = "1"
eaccelerator.debug = "0"
eaccelerator.filter = ""
eaccelerator.shm_max = "0"
eaccelerator.shm_ttl = "0"
eaccelerator.prune_period = "0"
eaccelerator.shm_only = "0"
eaccelerator.compress = "1"
eaccelerator.compress_level = "9"

创建缓存目录,重启apache

$sudo mkdir /tmp/eaccelerator
$sudo chmod 777 /tmp/eaccelerator
$sudo /usr/local/apache/apachectl restart

在phpinfo()检查是否安装成功.

3、安装配置XCache

XCache作为国人自己开发的东西,做小菜鸟的我也感到骄傲,而且XCache无论在速度还是性能上都做的不错。下面就赶紧让我们品尝它吧!

$wget http://xcache.lighttpd.net/pub/Releases/1.2.2/xcache-1.2.2.tar.gz
$tar xvzf xcache-1.2.2.tar.gz
$cd xcache-1.2.2
$/usr/local/php/bin/phpize
$./configure –enable-xcache –enable-xcache-coverager –with-php-config=/usr/local/php/php-config
$make
$sudo make install
$sudo mv /usr/local/php/lib/php/extensions/no-debug-non-zts-20060613/xcache.so /usr/local/php/lib/php/extensions/PECL

在php.ini添加配置信息:

extension = xcache.so
; xcache
xcache.admin.user = "admin"
xcache.admin.pass = "(执行) echo ’(你的密码)’|md5sum(得出的密文)"
;
xcache.size = 24M
xcache.shm_scheme = "mmap"
xcache.count = 2
xcache.slots = 8k
xcache.ttl = 0
xcache.gc_interval = 0

xcache.var_size = 8M
xcache.var_count = 1
xcache.var_slots = 8k
xcache.var_ttl = 0
xcache.var_maxttl = 0
xcache.var_gc_interval = 300
xcache.test = Off
xcache.readonly_protection = On
xcache.mmap_path = "/tmp/xcache"
xcache.coredump_directory = ""
xcache.cacher = On
xcache.stat = On
xcache.optimizer = Off
;
xcache.coverager = On
xcache.coveragedump_directory = ""

创建缓存目录,重启apache

$sudo mkdir /tmp/xcache
$sudo chmod 777 /tmp/xcache
$sudo /usr/local/apache/bin/apachectl restart

去查看phpinfo()信息吧!

三、PHP加速器测试

1、测试环境

硬件: AMD Athlon 64 X2 Dual Core Processor 4400+ @ 2.2GHz CPU, 2GB 内存. 160GB SATA 硬盘

软件: Linux Ubuntu server Gutsy 7.10, Apache 2.2.4, MySQL 5.0.45 和 PHP 5.2.3

测试指令: ab -c5 -n3000 http://example.com/ (我们使用的是Apache Benchmark (ab) 工具,并发连接为5,3000次请求)

2、测试结果

无任何加速器:

Document Path: /
Document Length: 21757 bytes
Concurrency Level: 5
Time taken for tests: 288.255212 seconds
Complete requests: 3000
Failed requests: 0
Write errors: 0
Total transferred: 66777000 bytes
HTML transferred: 65271000 bytes
Requests per second: 10.41 [#/sec] (mean)
Time per request: 480.425 [ms] (mean)
Time per request: 96.085 [ms] (mean, across all concurrent requests)
Transfer rate: 226.23 [Kbytes/sec] received
Connection Times (ms)
min mean[+/-sd] median max
Connect: 0 0 0.5 0 19
Processing: 181 479 186.0 444 1822
Waiting: 166 461 184.7 427 1708
Total: 181 479 186.0 444 1822
Percentage of the requests served within a certain time (ms)
50% 444
66% 525
75% 577
80% 619
90% 732
95% 819
98% 946
99% 1012
100% 1822 (longest request)

APC加速器:

Document Path: /
Document Length: 21757 bytes
Concurrency Level: 5
Time taken for tests: 98.530068 seconds
Complete requests: 3000
Failed requests: 0
Write errors: 0
Total transferred: 66777000 bytes
HTML transferred: 65271000 bytes
Requests per second: 30.45 [#/sec] (mean)
Time per request: 164.217 [ms] (mean)
Time per request: 32.843 [ms] (mean, across all concurrent requests)
Transfer rate: 661.84 [Kbytes/sec] received
Connection Times (ms)
min mean[+/-sd] median max
Connect: 0 0 0.0 0 2
Processing: 58 163 71.2 155 2452
Waiting: 53 158 69.6 150 2329
Total: 58 163 71.2 155 2452
Percentage of the requests served within a certain time (ms)
50% 155
66% 178
75% 193
80% 204
90% 235
95% 258
98% 285
99% 302
100% 2452 (longest request)

eAccelerator加速器:

Document Path: /
Document Length: 21757 bytes
Concurrency Level: 5
Time taken for tests: 95.983986 seconds
Complete requests: 3000
Failed requests: 0
Write errors: 0
Total transferred: 66777000 bytes
HTML transferred: 65271000 bytes
Requests per second: 31.26 [#/sec] (mean)
Time per request: 159.973 [ms] (mean)
Time per request: 31.995 [ms] (mean, across all concurrent requests)
Transfer rate: 679.39 [Kbytes/sec] received
Connection Times (ms)
min mean[+/-sd] median max
Connect: 0 0 0.1 0 3
Processing: 57 159 91.3 148 3830
Waiting: 50 152 89.8 142 3704
Total: 57 159 91.3 148 3830
Percentage of the requests served within a certain time (ms)
50% 148
66% 174
75% 193
80% 205
90% 239
95% 263
98% 289
99% 309
100% 3830 (longest request)

XCache加速器:

Document Path: /
Document Length: 21757 bytes
Concurrency Level: 5
Time taken for tests: 99.76300 seconds
Complete requests: 3000
Failed requests: 0
Write errors: 0
Total transferred: 66777000 bytes
HTML transferred: 65271000 bytes
Requests per second: 30.28 [#/sec] (mean)
Time per request: 165.127 [ms] (mean)
Time per request: 33.025 [ms] (mean, across all concurrent requests)
Transfer rate: 658.19 [Kbytes/sec] received
Connection Times (ms)
min mean[+/-sd] median max
Connect: 0 0 0.0 0 2
Processing: 59 164 83.4 155 3367
Waiting: 52 156 66.4 148 1802
Total: 59 164 83.4 155 3367
Percentage of the requests served within a certain time (ms)
50% 155
66% 178
75% 196
80% 206
90% 237
95% 263
98% 287
99% 305
100% 3367 (longest request)

3、结果摘要

 请求时间(秒)单次请求时间(毫秒)最大内存占用(MB)最小内存占用(MB)
None10.4196.082424
APC30.4532.842121
eAccelerator31.2631.992318
XCache30.2833.022919

四、PHP加速器比较结果总结

     1、通过测试得出eAccelerator在请求时间和内存占用综合方面是最好的。

     2、通过测试得出使用加速器比无加速器在请求时间快了3倍左右。

     3、通过各个官方观察,XCache是更新最快的,这也说明最有发展的。

        以上是总结结果,你也许会问我到底用那个加速器好呢?我只能告诉你,首先,用一定比不用好,其次每个加速器还有一些可以调优的参数,所以要根据你的系统环境而定,然后,我个人觉得你可以详细研究下eAccelerator和XCache,这两款潜力还是很大的,最后我从比较专业的测试网站搞了一张结果图:

cache

本文转载自:http://killker.com/blog/?p=94

posted @ 2013-03-19 10:13 王吉刚 阅读(225) | 评论 (0)编辑 收藏

2011年4月2日 #

PHP 注释文档标记

文档标记的使用范围是指该标记可以用来修饰的关键字,或其他文档标记。
所有的文档标记都是在每一行的 * 后面以@开头。如果在一段话的中间出来@的标记,这个标记将会被当做普通内容而被忽略掉。
@access
使用范围:class,function,var,define,module
该标记用于指明关键字的存取权限:private、public或proteced
@author
指明作者
@copyright
使用范围:class,function,var,define,module,use
指明版权信息
@deprecated
使用范围:class,function,var,define,module,constent,global,include
指明不用或者废弃的关键字
@example
该标记用于解析一段文件内容,并将他们高亮显示。Phpdoc会试图从该标记给的文件路径中读取文件内容
@const
使用范围:define
用来指明php中define的常量
@final
使用范围:class,function,var
指明关键字是一个最终的类、方法、属性,禁止派生、修改。
@filesource
和example类似,只不过该标记将直接读取当前解析的php文件的内容并显示。
@global
指明在此函数中引用的全局变量
@ingore
用于在文档中忽略指定的关键字
@license
相当于html标签中的,首先是URL,接着是要显示的内容
例如[url=http://bbs.phpchina.com/”http://www.jigwang.com”]PHP那些事儿[/url]
可以写作 @license
http://www.jigwang.com PHP那些事儿
@link
类似于license
但还可以通过link指到文档中的任何一个关键字
@name
为关键字指定一个别名。
@package
使用范围:页面级别的-> define,function,include
类级别的->class,var,methods
用于逻辑上将一个或几个关键字分到一组。
@abstrcut
说明当前类是一个抽象类
@param
指明一个函数的参数
@return
指明一个方法或函数的返回指
@static
指明关建字是静态的。
@var
指明变量类型
@version
指明版本信息
@todo
指明应该改进或没有实现的地方
@throws
指明此函数可能抛出的错误异常,极其发生的情况
上面提到过,普通的文档标记标记必须在每行的开头以@标记,除此之外,还有一种标记叫做inline tag,用{@}表示,具体包括以下几种:
{@link}
用法同@link
{@source}
显示一段函数或方法的内容

posted @ 2011-04-02 18:09 王吉刚 阅读(2650) | 评论 (0)编辑 收藏

2011年3月19日 #

前端开发实战教程—基于PHP、Google Maps Api的网站开发(一)

     摘要: 前端开发实战教程— 基于PHP、Google Maps Api的网站项目开发第一节:前言及准备工作前言笔者是一名普通的前端开发爱好者,目前面临毕业,在国内某互联网公司从事前端开发的实习工作。很乐意与朋友分享和交流技术经验,也很乐于帮助有同样兴趣爱好的技术新手。我想通过这样一种实际项目开发的方式,帮助新手尽快了解“前端开发”的技术内幕和目前技术公司流行的开发方式。限于本人的水...  阅读全文

posted @ 2011-03-19 17:10 王吉刚 阅读(1256) | 评论 (0)编辑 收藏

2010年11月11日 #

PHP三层结构

     摘要:   阅读全文

posted @ 2010-11-11 17:21 王吉刚 阅读(541) | 评论 (0)编辑 收藏

2010年11月10日 #

Apache 防盗链(Apache Anti-Leech)技术的简单实现[转]

Apache 防盗链(Apache Anti-Leech)技术的简单实现

http://www.xiaohui.com/dev/server/20070330-apache-anti-leech.htm

 

一. 遭遇图片盗链

  我的个人网站 http://www.xiaohui.com/ 使用的是国外付费空间,有流量限制。今天是 2007.03.29,收到主机商的通知邮件,提醒我本月的流量即将超出配额。——超出流量,就要向万恶的美帝资本家交银子,吓我一跳,平常网站的流量根本使用不完,马上查看awstats 的日志分析,没有发现什么异常。于是把 access log 日志拉下来,用逆火网站日志分析器(http://www.loganalyzer.net/cn) 检查了一下站点盗链情况,发现本站的 深圳高交会之神州龙芯 CPU 映象记[图文] http://www.xiaohui.com/weekly/20041015a.htm 以及 香港2005年春季行(3) - 庙街风光 http://www.xiaohui.com/trip/hk20050403.htm 等原创文章中的图片,被许多网站直接盗链,造成流量占用大幅上升。

  国内网站盗链成风,最倒霉的就是咱们这种使用付费主机有流量限制的个人了。没办法,只得加上了一个简单的反盗链(Anti-Leech)措施。我的服务器是 Apache,处理防盗链比较简单,解决之后,于是写下这篇笔记,记录在http://www.xiaohui.com/dev/server/20070330-apache-anti-leech.htm

二. 使用 rewrite 技术实现 Apache 防盗链

  Apache 防盗链的第一种实现方法,可以用 rewrite 实现。首先要确认 Apache 的 rewrite module 可用:能够控制 Apachehttpd.conf 文件的,打开 httpd.conf,确保有这么一行配置:

LoadModule rewrite_module modules/mod_rewrite.so

  然后在找到自己网站对应的 配置的地方,加入下列代码:


ServerName xiaohui.com

# 防盗链配置 

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://xiaohui.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://xiaohui.com$ [NC]
RewriteCond %{HTTP_REFERER} !^http://www.xiaohui.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://www.xiaohui.com$ [NC]
RewriteRule .*\.(gif|jpg|swf)$ http://www.xiaohui.com/about/nolink.png [R,NC]



  防盗链配置的说明

  1. 红色部分: 表示自己的信任站点。对我的站点来说,设置为 http://www.xiaohui.com 和 http://xiaohui.com 
  2. 绿色部分: 要保护文件的扩展名(以|分开)。以这些为扩展名的文件,必须通过红色标注的网址引用,才可以访问。 
  3. 蓝色部分: 盗链后的重定向页面。用以输出警示信息,这张图片应该尽可能的小。例如我的警示图片是 http://www.xiaohui.com/about/nolink.png。为了简单处理的原因,我的绿色字体部分,要保护的图片扩展中,没有 .png 的图片,而警示图片是 .png的。(我站内没有 .png的其他图片)

  然后重新启动 apache 服务器即可。

  有些用户使用的是虚拟主机,没有服务器的控制权,无法修改 httpd.conf 文件和重启服务器。那么请确认你的虚拟主机支持.htaccess,将上面的配置写入 .htaccess 文件,放入根目录或图片所在的目录即可:

.htaccess 文件的内容:

# 防盗链配置 
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://xiaohui.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://xiaohui.com$ [NC]
RewriteCond %{HTTP_REFERER} !^http://www.xiaohui.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://www.xiaohui.com$ [NC]
RewriteRule .*\.(gif|jpg|swf)$ http://www.xiaohui.com/about/nolink.png [R,NC]

  注意:

  1. httpd.conf 文件里的配置,是在 apache 启动时一次读取,效率很高
  2. .htaccess 文件里的配置,每次访问都需要读取分析,效率很低。

三. 使用 SetEnvIfNoCase 和 access 技术实现 Apache 防盗链

另一种方式是利用 SetEnvIfNoCase 和 access。具体的代码如下:

SetEnvIfNoCase Referer "^http://xiaohui.com" local_ref=1
SetEnvIfNoCase Referer "^http://www.xiaohui.com" local_ref=1

Order Allow,Deny
Allow from env=local_ref

  将上述代码,放入前面所讲的 httpd.conf 或 .htaccess 文件即可。

四. Apache 防盗链的技术小结

  通过判断 referer 变量的值,判断图片或资源的引用是否合法,只有在设定范围内的 referer,才能访问指定的资源,从而实现了防盗链(Anti-Leech)的目的。需要指出的是:不是所有的用户代理(浏览器)都会设置 referer 变量,而且有的还可以手工修改 referer,也就是说,referer 是可以被伪造的。本文所讲的,只是一种简单的防护手段。当然,应付一般的盗链也足够了。

五. 参考资料

posted @ 2010-11-10 17:15 王吉刚 阅读(347) | 评论 (0)编辑 收藏

函数:PHP获取某绝对/相对路径的父路径

文所介绍的函数:通过PHP获取某个给定路径下的父路径。给定的路径可以是相对路径和绝对路径。

实例:

PHP函数的输入输出示例
输入路径函数返回值
/var/www/htdocs/images//var/www/htdocs/
/var/www/htdocs/images/var/www/htdocs/
/var/www/htdocs/index.php/var/www/htdocs/
c:\www\files\folder\c:\www\files\

请注意:

1、如果在给定的路径中存在一个反斜杠”\”,则认为所有的其他斜杠均为反斜杠”\”。(Windows平台上)

2、输入路径的结尾的斜杠不是必需的,函数会自动判断是相对路径还是绝对路径(物理路径)。

3、如果$convert_backslashes 标志变量被置为True,那么路径中的所有反斜杠”\”都会被转换成正斜杠”/”

<?php
function parent_directory($path$convert_backslashes = false) {
// 检测是否包含反斜杠
if( strstr($path\\) ) $backslash = true;
// 将反斜杠转换成正斜杠
$path = str_replace(\\‘/’$path);
// 如果输入路径结尾包含斜杠,则自动加上
if( substr($pathstrlen($path) – 1) != ‘/’ ) $path .= ‘/’;
// 获取父路径
$path = substr($path0strlen($path) – 1);
$path = substr( $path0strrpos($path‘/’) ) . ‘/’;
// 转换回反斜杠
if( !$convert_backslashes && $backslash ) $path = str_replace(‘/’\\$path);
return $path;
}
?>

posted @ 2010-11-10 15:08 王吉刚 阅读(1569) | 评论 (0)编辑 收藏

2010年11月6日 #

ThinkPHP框架快捷键使用说明

php mvc框架ThinkPHP中有很多快捷键,但是很多时候我们不太明白它的意思,下面我简单的列了下他们的含义:

A快速实例化Action类库

B执行行为类

C配置参数存取方法

D快速实例化Model类库

F快速简单文本数据存取方法

L 语言参数存取方法

M快速高性能实例化模型

R快速远程调用Action类方法

S快速缓存存取方法

U URL动态生成和重定向方法

W 快速Widget输出方法

posted @ 2010-11-06 09:42 王吉刚 阅读(332) | 评论 (0)编辑 收藏

2010年11月4日 #

跨站脚本攻击XSS攻击与防范指南

     摘要:   阅读全文

posted @ 2010-11-04 11:00 王吉刚 阅读(1247) | 评论 (0)编辑 收藏

2010年10月30日 #

CSS 清除浮动的4种方法

此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景。<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;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>


未清除浮动前如图所示:

四种清除浮动方法如下:


1、使用空标签清除浮动。 我用了很久的一种方法,空标签可以是div标签,也可以是P标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动,并为其定义CSS代码:clear:both。此方法的弊端在于增加了无意义的结构元素。
对于使用额外标签清除浮动(闭合浮动元素),是W3C推荐的做法。至于使用<br />元素还是空<div></div>可以根据自己的喜好来选(当然你也可以使用其它块级元素)。不过要注意的是,<br />本身是有表现的,它会多出一个换行出来,所以要设定它的heigh为0,以隐藏它的表现。所以大多数情况下使用空<div>比较合适。<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;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
.clear{clear:both;} 
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
<div class=”clear”>
</div>
</div>


2、使用overflow属性。
 此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性:overflow:auto,即可!也可以用overflow:hidden;”zoom:1″用于兼容IE6,也可以用width:100%。
不过使用overflow的时候,可能会对页面表现带来影响,而且这种影响是不确定的,你最好是能在多个浏览器上测试你的页面;<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;overflow:auto;zoom:1; }   /* overflow:auto可以换成overflow:hidden,zoom:1可以换成width:100%*/
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>


3、使用after伪对象清除浮动。
 该方法只适用于非IE浏览器 。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像素;二、content属性是必须的,但其值可以为空,蓝色理想讨论该方法的时候content属性的值设为”.”,但我发现为空亦是可以的。<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>

4、浮动外部元素,float-in-float这种方法很简单,就是把“#outer”元素也进行浮动(向左或者向右)。
但是这种方法带来的别外一个问题就是和“#outer”相邻的下一个元素会受到“#outer”的影响位置会产生变化,所以使用这种方法一定要小心。有选择把页面中的所有元素都浮动起来,最后使用一个适当的有意义的元素(比如页脚)进行清理浮动,这有助于减少不必要的标记,但是过多的浮动会增加布局的难度。<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;float:left;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>

前三种方法清除浮动后如图所示:(第四种方法将导致外层div不会占整行,因为自身float:left了)

 


posted @ 2010-10-30 14:25 王吉刚 阅读(441) | 评论 (0)编辑 收藏

仅列出标题  下一页