歡迎光臨LoveB的部落格
br玩转清除浮动
查看( 3097 ) /
评论( 0 )
先看一下br怎么玩转“清除浮动”了。使用以下代码
nN*t-W+`E0
复制代码别存为*.html进行演示LUPA开源社区!BZZ r7AuX l/r
:S3D?;K Y&}m0 很简单很方便吧？不过还有一个缺点，占了一行的空间。怎么将br设置成不占行空间呢？LUPA开源社区!Y/l U| y bp\ p`
br目前所知可用的css样式，影响br的外观表现LUPA开源社区"\;l*c(x*^~ b
:z_P5Z\Xy~0
如果设置height width visiblility border background ==这些影响外观的样式都无作用LUPA开源社区dkb1T4{ooU g
仅仅可以设置行高为0，跟不换行了。
+rr p b8XgE0 不得不承认display:none;这个很鸡肋。
s-cK3L ?` UY~0
5t1I_IT&_:e|:R0 在此总结一下html中的br标签 有5种属性依次为"class", "clear", "id", "style", "title"使用DW8的时候代码提示可以看得到了。差不多都支持这些属性吧，除了某些浏览器不支持title。 修正后的br清除浮动代码只需两行即可LUPA开源社区i#B+J YK.J'@0w
!\ {$J CClM$_0
注意：使用br的方法清楚浮动的缺陷是，不能帮助我们通过strict.dtd验证，可以通过xhtml1-transitional.dtd验证了。通不过strict验证的原因是html标签属性尽量少用，因为表现要与结构内容分离开来了。
.EbO$bq0
#e } fc.@o0
1`*E-S \6| Z sv{Q0 然后对比一下网上的div万能清除浮动了LUPA开源社区 bi_ \)a W
I0x;c\2W G0@0 <div style="clear:both"></div> 本来最简单了，但是占用高宽。after伪类使用的非常好，可是非标准兼容的不买账了。LUPA开源社区(R$V9V VzR-Q
LUPA开源社区J?D,f5qc A
两种方法的比较LUPA开源社区| wR"~/}U~
使用<br clear="all" /> 与 <div style="clear:both"></div>方法相比代码少很多而且语义也很强， 入门使用这个简单不过了。怎么简单怎么玩。LUPA开源社区4]drkS6Q5i2h0y9n
2v]6A4kc dcmD0{0
3zy H _y.R0 清楚浮动有什么好处？ 撑高父容器了height:auto; 让布局更好看点。LUPA开源社区}v F I-e.Qo
其实浮动也没什么不好的了，关键是浮动被滥用了就得请clear:both出来了。
F]o^{IxvL0
_J"\8c)bi0 转载请注明出处, 谢谢合作! 原文地址:http://www.10kuai.cn/br.html
yy%x S WU f:o0
j*i t R&DO;s0 [ 本帖最后由 loveb 于 2007-4-1 13:36 编辑 ]
nN*t-W+`E0
CODE:
,{8IQ$D:rB0<br clear="all" />LUPA开源社区Sw;d,D3H复制代码别存为*.html进行演示LUPA开源社区!BZZ r7AuX l/r
CODE:LUPA开源社区/n~pP+Oo
LUPA开源社区 s:D*M h_?
a
GMF
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">LUPA开源社区.]R#OL8L"O3RkB
<html xmlns="http://www.w3.org/1999/xhtml">
{`oZ ^:gR4k1[#Nqq0
<head>
OL"isS a%b(O2]0
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
&n}(I/Y `9ePl c0
<title>br玩转清除浮动</title>
D!Q"Q.jPG;A2o
@9n
C$x0
</head>LUPA开源社区;WQ` g)`-Ft7]
yi/S)De5N!|
h jp0
<body style="font-family:Verdana, sans-serif;font-size:12px;"><!-- 包含logo header navigator -->LUPA开源社区:h&vO$Kg%B*D
Y
<div>
r @ Fy
p0
<div style="float:left;width:400px;height:200px;border:1px solid #333333;">
[J \+T0g6y0[0
<p>下面的这一行使用了<br clear="all" />,可以看得出来使用br标签的clear属性也能达到<div style="clear:both"></div>的效果，为什么不放弃试试更简单的呢？ </p>
}7[ H t.h{0
<p>br具有以下五种标准兼容的属性class, clear, id, style, title。以前只知道br是强制换行，现在知道br可以清楚浮动，真是比较汗了。尽管它不能设置样式。</p>LUPA开源社区-I.PB R'q,R}
<p>已在IE5.0 IE5.5 IE6.0 IE7.0 FF Opera Netscape下测试通过。</p>
)|"i D-ie$Y*Od0
<p>怎么样快试试新方法吧!o(∩_∩)o</p>LUPA开源社区9E#Z*P&U"lNs6c D&N
</div>
z9Z)}GStZ%Y0
<br clear="all" /><br />
X N&\ RtO7Z`n:y1HG0
<p>That quick brown fox jumps over the lazy dog</p>
\PEtK)g0
<p>That quick brown fox jumps over the lazy dog</p>
J] ]Y|
p7u0
<p>That quick brown fox jumps over the lazy dog</p>LUPA开源社区Ii"iDME|
<p>That quick brown fox jumps over the lazy dog</p>
uf"d\!K(X,]0
<hr />LUPA开源社区}fsS$s4h$w u
<div style="float:left;width:400px;height:200px;border:1px solid #333333;">
^%q!x6kye:K0
<p>下面这行仅用了<br /></p>
v7_)H(ss }0
<p>备注：使用xhtml1-transitional.dtd 过渡方法可以通过验证了。<br />LUPA开源社区$V4x o Z!BQ
W3L
如果是xhtml1-strict.dtd就不行了，strict要求标签属性越少越好，表现与结构分离了。</p>LUPA开源社区r%L.BS_'\
</div>LUPA开源社区g&}Z3U[n4C
<br /><p>That quick brown fox jumps over the lazy dog</p>
F ]~:U'sW|
E-]0
<p>That quick brown fox jumps over the lazy dog</p>LUPA开源社区 @"K7@Y5FG#v3C;J
V
<p>That quick brown fox jumps over the lazy dog</p>
Ntp"Yf-L
c0
<p>That quick brown fox jumps over the lazy dog</p><p>That quick brown fox jumps over the lazy dog</p>LUPA开源社区 GlYjEj H
<p>That quick brown fox jumps over the lazy dog</p>
8m a"q r r[_{0
<p>That quick brown fox jumps over the lazy dog</p>
I bvt ?%V.NR0
<p>That quick brown fox jumps over the lazy dog</p>LUPA开源社区*y A?+_LjU^
<hr />
6N:I IXW(D$|3M
L0
<div style="float:left;width:400px;height:200px;border:1px solid #333333;">LUPA开源社区F|iBE#o e
<p>两个同样左浮动的div之间仅加一个<br / ></p>
T-t"j5bld0
<p>[ DISCUZ_CODE_1 ]</p>
!_ eM5H"R6O'y0
</div>
r?4m2]N G1s0
<br />LUPA开源社区L%w.m;I~7x
<div style="float:left;width:400px;height:200px;border:1px solid #333333;">
u.^;xk0^w}0
<p>两个同样左浮动的div之间仅加一个<br / ></p>LUPA开源社区Ka6Nn){2i"n4o
<p>[ DISCUZ_CODE_2 ]</p>LUPA开源社区5X1\ r#}H5V)]!f
</div>LUPA开源社区+OY0E'o-zO_
<br clear="all" />LUPA开源社区)MSxf/`4Hv9L i9n
])dH y#}*p Y
^%G D0
<hr />
~y#]j zA lj V;J9m0
<div style="float:left;width:400px;height:200px;border:1px solid #333333;">
[ pq|0G w0
<p>两个同样左浮动的div之间加一了个<br clear="all" / ></p>LUPA开源社区 W,q$j2DU |D
<p>[ DISCUZ_CODE_3 ]</p>
u5L;W/M,r"r0
</div>
iB(~;wW5e v ]0
<br clear="all" />LUPA开源社区~? K eR7q}bQ1p
<div style="float:left;width:400px;height:200px;border:1px solid #333333;">LUPA开源社区 x/g
u3|8we.O p%k
<p>两个同样左浮动的div之间仅加一个<br clear="all" / ></p>
3@%Xj/B'H u/{KS"E0
<p>[ DISCUZ_CODE_4 ]</p>
%y{3AX
mW0
</div>
7F i.O%]n%v%@0
<br clear="all" />LUPA开源社区*}*yWKX
</div>
wqv B+V\ @p0
<div>LUPA开源社区K9SaY#z{&@7H
<p>
u)k%w1py1r-vO"L0
<a href="http://validator.w3.org/check?uri=referer" rel="external"><img
5JP#q/sK f0
src="http://www.w3.org/Icons/valid-xhtml10"LUPA开源社区.L
~[w]? o2\
alt="Valid XHTML 1.0 Strict" width="88" height="31" /></a> </p>
#Cevh(\v1T0
<p>
*})N @(ZSu$e |0
<a href="http://jigsaw.w3.org/css-validator/" rel="external">LUPA开源社区MWT j$uM;B)R Z @(`
<img
3^"D_x3q0
src="http://jigsaw.w3.org/css-validator/images/vcss" LUPA开源社区Y5yV c8`"ii
ZW
alt="Valid CSS!" width="88" height="31" style="border:0;width:88px;height:31px" /> </a></p>LUPA开源社区5e,e
O;|Q#GP!Q
</div>LUPA开源社区&q
j m0K$M [J
{%G6gz
<div id="footer" style="text-align:center;"><p>Powered by <a href="http://www.lupaworld.com/uin=20122624%26Site=http://www.10kuai.cn%26Menu=yes.html" title="在线联系QQ：20122624">hero4u</a> 制作人：<a href="mailto:webmaster@hero4u.cn" title="发送邮件或联系QQ：20122624">王赟</a></p>
z,_/v"P%n5G,~ h0
<p>LUPA开源社区!E#@.[ zx Ya[X
版权所有Copyringht©2007 企业名称 </p>LUPA开源社区'j;p/q:u+v P]e LbN
<p>建议使用1024×768分辨率以达到最佳浏览效果</p>
~ P7iC-B_9Q"G\y0
LUPA开源社区Sy1r;W F"^ ?C.u
</div>LUPA开源社区s6}%\x({'` [,L pR5f
</body>
+q|)n"C Gn \'g(_%K/w0
</html>:S3D?;K Y&}m0 很简单很方便吧？不过还有一个缺点，占了一行的空间。怎么将br设置成不占行空间呢？LUPA开源社区!Y/l U| y bp\ p`
br目前所知可用的css样式，影响br的外观表现LUPA开源社区"\;l*c(x*^~ b
:z_P5Z\Xy~0
CODE:
WvZ t#@ L0display:none;LUPA开源社区s!sn!w i C2D3Ae
-~:U5Nn
]"a2f+t&r0
/y['`-}/D D9n1m0
9Y$r0i MEPE*?P0
line-height:0; LUPA开源社区 nlmZo@如果设置height width visiblility border background ==这些影响外观的样式都无作用LUPA开源社区dkb1T4{ooU g
仅仅可以设置行高为0，跟不换行了。
+rr p b8XgE0 不得不承认display:none;这个很鸡肋。
s-cK3L ?` UY~0
5t1I_IT&_:e|:R0 在此总结一下html中的br标签 有5种属性依次为"class", "clear", "id", "style", "title"使用DW8的时候代码提示可以看得到了。差不多都支持这些属性吧，除了某些浏览器不支持title。 修正后的br清除浮动代码只需两行即可LUPA开源社区i#B+J YK.J'@0w
!\ {$J CClM$_0
CODE:
(qm!o} V k`0<style> br{ line-height:0; } </style>LUPA开源社区 R?)b Zbk z
LUPA开源社区.K6G9c bh C4M*L+^3w
LUPA开源社区K6d4z7OG
LUPA开源社区+p9`0G[)a
ck C
LUPA开源社区#o4B]*u4G
LUPA开源社区T;R#b
eu M ^u e
LUPA开源社区JCX.GKL)ut
m*[&a)vQJ VXNF0
<br clear="all" />LUPA开源社区2V`&\%j7pd4|p注意：使用br的方法清楚浮动的缺陷是，不能帮助我们通过strict.dtd验证，可以通过xhtml1-transitional.dtd验证了。通不过strict验证的原因是html标签属性尽量少用，因为表现要与结构内容分离开来了。
.EbO$bq0
#e } fc.@o0
1`*E-S \6| Z sv{Q0 然后对比一下网上的div万能清除浮动了LUPA开源社区 bi_ \)a W
CODE:LUPA开源社区*t#N@gA X kb$a
*
(fX~ a@-c;^O0
LUPA开源社区r(FXG\d2dU d
)E,yN x]&]^0
y*M
];H ~$A0
{
5VS7y/\9h5S0
&f-Oj u[4x+NZ0
!gL%NwMB%d6i;I0
^6{8j C;p
W+n#h^0
margin:0;
9q&Pv{,h/X[iWcg0
LUPA开源社区wK nJ T8V3DJ8^vW
b%J8O.EzN#c0
LUPA开源社区d(lc.];G!rxI
padding:0;LUPA开源社区|.R#e,?w'_WK C
LUPA开源社区'y)\5?fc
,G+c,Uz"mF^M-U0
LUPA开源社区L3^)S9U*z qY6`}
}LUPA开源社区#^p C/i8l#wG;AM
LUPA开源社区*ZM7td;wp4CG,`
`P r~,{ V0
LUPA开源社区Y$A:C
K'E
html,bodyLUPA开源社区4k1[0DN-f.s6g
LUPA开源社区&ju+x6wV
5s u"U[5`0
g{:E)q i s/f!Y2k0
{
M+J+L9{*E A$\2E |4?0
2I(aaW PNvt5qt#n0
LUPA开源社区 e4I US&})j+Z9ce
LUPA开源社区
Z/|8s;X^!B
height:100%;
vm
c ~+\|!J5o0
LUPA开源社区
`
| T[]0a"S
p S7x@ gk0
6mjftt}0Z L\8i"G f0
width:100%;LUPA开源社区 @4q:Nhz(y Z
-F TE,CF0
LUPA开源社区6` v2L)p pM"zY-Se
#w!ij8c;A0
}LUPA开源社区+s/N-Ey.a w
LUPA开源社区z,g/X N`7k v6l n a
LUPA开源社区$UkKI:fXN ?
]`8O6we jw3L0
.clearBoth:after {LUPA开源社区*H,v Q&n|7W
LUPA开源社区,^0~8f$Lrr;l
f/M o
gI6HY$U"^0U'p;]0
LUPA开源社区
h QlB'e`!pI
content: "."; LUPA开源社区 Y/Pm&_1lu l
LUPA开源社区-?vw.s`Vl
LUPA开源社区'c"c5s@8DR(HD s
?i4xK%YD"lz+R0
display: block;
+@1d7g
~4Py!a0
q,z^6]R5WZ0
&G^Z0v t
w b;T0
2`;If g R7lI0
height: 0; LUPA开源社区`,Df
g}7} yK
]1}5_:^,q
LUPA开源社区Y4o-f3Bd'Q
LUPA开源社区 I@[,q4V\
He/oKyE0
clear: both; LUPA开源社区:P0I
][\)}g.z8j$`
w
LUPA开源社区\H8t.Y,r0Vjq:x
0OaH
B m$Y|OD0
7LY H(l9~0c5[0
visibility: hidden;LUPA开源社区
Y2s VOn!Q)o
LUPA开源社区:u OJ }1qJ
BW w qjd ?:?(i Z0
iH s%SN(@8^ jw'a0
}LUPA开源社区!@8JV A.j7C?X^S
:fY#p%{*J+cE#^0
LUPA开源社区5HL c)NcI;x
r3a G
(O1a i(K&vFX:v0
.clearBoth {LUPA开源社区7Y `)Yj0u(K2?
t(xz3R.z+f,F0
LUPA开源社区!l @-g C {Dkjl
LUPA开源社区7w$M8S rGC/|1m/J&k
height:0;
@"h%|!DZu&m*o*K }v0
,RQf8dN5F'|-k0
LUPA开源社区z~F-Rai\y
Mz;gxp)y0J M*p0
width:0;LUPA开源社区0yX"@"R(iM[8`
U4h'ZUj)~0
6P5VK8Wrg0
`$H)F2owU$v/S0
line-height:0;
#Z(s Yl
S)u uJ B0
!qjz'eQ0
LUPA开源社区YK^CJ
*H,p6uK K0v$sKl
]*\0
display: inline-block;LUPA开源社区 W&m S? T M1~
LUPA开源社区3e a[$f e+kR
6__5U%]"D jL7S0
F1B3U3z f4`-C0
overflow:hidden;
az-zH#U)F[ m0
G-X~4N9cKc6G0
X;]B y#@? dH0
'vS d5y&XjX0
}LUPA开源社区&]&r2Dhb%kWW0a
r-Fl8M$w0
3kY*z:dvz0
PM1w{)m0
* html .clearBoth {height: 0%;}这种方法很多浏览器都支持。但是可以帮助我们通过strict.dtd验证，呵呵。I0x;c\2W G0@0 <div style="clear:both"></div> 本来最简单了，但是占用高宽。after伪类使用的非常好，可是非标准兼容的不买账了。LUPA开源社区(R$V9V VzR-Q
LUPA开源社区J?D,f5qc A
两种方法的比较LUPA开源社区| wR"~/}U~
使用<br clear="all" /> 与 <div style="clear:both"></div>方法相比代码少很多而且语义也很强， 入门使用这个简单不过了。怎么简单怎么玩。LUPA开源社区4]drkS6Q5i2h0y9n
2v]6A4kc dcmD0{0
3zy H _y.R0 清楚浮动有什么好处？ 撑高父容器了height:auto; 让布局更好看点。LUPA开源社区}v F I-e.Qo
其实浮动也没什么不好的了，关键是浮动被滥用了就得请clear:both出来了。
F]o^{IxvL0
_J"\8c)bi0 转载请注明出处, 谢谢合作! 原文地址:http://www.10kuai.cn/br.html
yy%x S WU f:o0
j*i t R&DO;s0 [ 本帖最后由 loveb 于 2007-4-1 13:36 编辑 ]
相关阅读:
- Java开源 Web功能测试工具介绍 (lifxue, 2007-2-26)
- google blogger新模板中添加AdSense (lifxue, 2007-3-07)
- Java社区观望:RCP能否取代Web技术? (joejoe0332, 2007-3-20)
- 垂直三栏布局拥有相同高度的方法 (loveb, 2007-3-28)
TAG: WEB
标题搜索
日历
|
|||||||||
| 日 | 一 | 二 | 三 | 四 | 五 | 六 | |||
| 1 | 2 | 3 | 4 | ||||||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 | |||
| 12 | 13 | 14 | 15 | 16 | 17 | 18 | |||
| 19 | 20 | 21 | 22 | 23 | 24 | 25 | |||
| 26 | 27 | 28 | 29 | 30 | 31 | ||||
我的存档
数据统计
- 访问量: 19869
- 日志数: 21
- 图片数: 14
- 商品数: 2
- 建立时间: 2006-12-23
- 更新时间: 2007-12-21
