Clear v Float

Clear v Float l k thut dng rt nhiu trong thit k giao din bng CSS vi hai tnh nng cng tn l Clear v Float. Float dng tch mt thnh phn bt k khi cch hin th thng thng ca n to ch cho nhng thnh phn sau di chuyn ln v ph y ch trng nu c. Clear dng ngn khng cho thnh phn di di chuyn ln trn lp vo ch trng. V d bn c 2 on vn bn, bn ch mun on vn th nht bao quanh hnh nh v on vn th hai th vn nm di. Theo lut trn th c c ch l on vn th 2 cng s trn ln lp ch trng. Nu bn khng mun iu ny xy ra bn c th s dng Clear n khng trn ln c.

1. Float
Float ch yu dng cn chnh hnh nh sao cho ch s bao quanh hnh nh. Nhng n cng c p dng nhiu trong vic thit k giao din s dng CSS. v d di y s bao gm mt hnh logo ca izwebz v mt on vn bn. Ti s cho hnh c float: left v on vn bn c gi nguyn. 1 img {float: left;} to c hiu ng ny bn cn c mt th <img> v <p> 1 2 3 4 5 6 7 8
<div id='bao_quanh'> <img src="images/ball.png" alt="ball" /> <h3>Box Model</h3> <p>To th div bao quanh l cch bn qun l rng thc s ca box. cho d khi ti thm gi tr padding bng 5px vo mi bn tri phi, n cng khng lm tng ln. M ngc li, n s b y li vo bin l 5px .</p> </div><!--End #bao_quanh-->

Tm li khi bn cho tm hnh float: left bn khin n b dch chuyn sang pha tn cng bn tri (hoc phi nu float: right) so vi th m ca n l div id=bao_quanh. on vn bn cng s di chuyn tng t so vi th m ca n, do to ra hiu ng bao quanh ly hnh nh. Cho nn nu by gi bn khng mun ch bao quanh hnh na m mun n to ra 2 ct song song vi nhau, bn ch cn tng gi tr margin-left cho on vn thnh 150px. 1 p {margin-left: 150px;background: #faf3c7;} 2 img {float: left;}

Khi bn cho tm hnh float sang bn tri v on vn bn c l tri bng vi ln ca tm hnh, th hiu ng bao xung quanh hnh s mt i m thay vo bn c 2 ct song song vi nhau. y l nguyn l c bn nht to ra giao din c nhiu ct s dng float. Min l mi thnh phn khi c float u c mt gi tr rng nht nh th n s xp song song vi nhau v to ra ct (nu din tch rng). Nu bn lm nh vy vi 3 th <div> float: left v c rng nht nh, bn s c 3 ct song song. Sau bn c th thm cc thnh phn vo tng ct to nn giao din.

2. Clear
Lun i chung vi Float l Clear. Clear thc cht ch l mt tnh nng chng khng cho on vn di trn ln trn lp vo ch trng. Nh ni trn, khi bn dng float bn c th to ra hiu ng ch bao xung quanh hnh. Nhng i khi v d ch, cho nn on vn di di chuyn ln trn v lp vo ch trng. Tt nhin khng phi l iu bn mun, do vy bn cn s dng Clear dn sch n i.

 v d di y ti c 2 on vn v 2 tm hnh. Nu bn cho tt c cc thnh phn u float: left bn s thy n b nh hnh di y.

L do l v tt c cc thnh phn u c float: left do vy hnh v on vn di n s c ph y ch trng m tm hnh v on vn th nht li khi b float: left. V cng chnh v l m to ra hiu ng ta khng mong i. C nhiu cch x l vn ny, ti s hng dn bn c th hn trong video tutorial v Clear v Float. Cn by gi y l cch ph bin nht v cng gy ra nhiu tranh ci nht. t c mc ch sao cho tm hnh v on vn th 2 ngoan ngon chu chui xung di, chng ta s thm mt th div trng vo di on vn th nht. 1 2 3 4 5 6 7 8 9 10
<div id='bao_quanh'> <img src="images/ball.png" alt="ball" /> <h3>Clear v Float</h3> <p><!--Ni dung b ct ngn --></p> <div class="clear"></div><!-- Th div trng vi class="clear"--> <img src="images/ball.png" alt="ball" /> <p><!--Ni dung b ct ngn --></p> </div><!--End #bao_quanh-->

Sau trong CSS, bn ch vic thm on code sau: 1

.clear {clear: both;}

Vi mt th <div> v mt class dng clear, by gi th n s xut hin nh ri

S d bin php ny gy tranh ci l v chng ta thm mt thnh phn khng phi l ni dung vo phn ni dung ct t c mc ch. iu ny i ngc li vi nguyn l ca CSS l tch ri ni dung khi cch trnh by. Cho nn nu bn khng mun c mt th div trng trong code HTML ca mnh bn cng c th lm theo cch di y.

S dng clearfix
Bn copy on code sau v cho vo stylesheet 1 2 3 4 5 6 7 8 9 10
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */

By gi nu bn mun clear n th bn khng phi to mt th div trng na m ch vic khai boclass=clearfix vo th m cha cc thnh phn float. Trong v d trn bn thm vo phn sau 1 <div id="bao_quanh" class="clearfix">

Vi cch ny bn khng cn phi thm mt th div na m vn hin ngon lnh. Cho n by gi cch ny cng rt ph bin v n hin th tt trn mi trnh duyt. Ti cng c lm mt Video tutorial v ch ny, bn c th tham kho thm. C nhn ti vn lun s dng phng php ny bi v n n gin, gn nh v khng cu k. Ch c mt th div trng thm vo phn ni dung cng chng cht ai ><. Chc c l phi ch n khi CSS3 ra i v c cch khc phc tt hn v d dng hn.