HTML & CSS - "Float"

Web design a bawm hrang hrangte remkhawm khan website mawi tak a siam theih tih hi lo hre ta ila. Website kan siam dawn a, kan website chhunga awm turin bawm engemaw zah kan duang lawk a, mahse engtinnge kan remkhawm tak ang le.
Thil pakhat hemi atana tangkai tak mai CSS Float chungchang kan sawi dawn a ni.

Float hi CSS property pakhat a ni, sap tawnga a awmzia ang chiah hi a hnathawh dan tur chu a ni deuh mai. Float hian kawng thumin thawh dan a nei a, 'float:none', 'float:left' leh 'float:right' te a ni. HTML element-te kan webpage chhungah vei lam leh ding lamah awlsam takin float hmang hian kan tawlh kual tir thei dawn dawn a ni. Default-in HTML element-te hi veilam emaw dinglamah emaw an float lo a, chuvangin 'float:none' a ni tihna a nih chu. Float none hi chu sawi thui vak tur a awm lova, a hming ang hian float nawhreh a ni ti mai ang. Kan sawi tum ber zawk chu 'float:left' leh 'float:right' zawk hi a ni.

A hnuaia example hmang hian kan sawi fiah ang.

HTML Code:

<div class="box1">BOX 1</div>
<div class="box2">BOX 2</div>

CSS:

.box1 {
   background:red;
   height:30px;
   text-align:center;
   width:400px;
}
.box2 {
   background:blue;
   height:30px;
   text-align:center;
   width:400px;
}

Browser-a a lan dan tur

Heta kan hmuh ang hian box pahnihte hi an inchherchhuan a. DIV element hi block element a nih avangin a dinglam sir-ah hian thil dang awm a remti lova, box pahnihna hian ahnuai chiah a rawn luah ta a ni. Hei hi default-a block element ho lan dan a ni. Nichin khan element-te kha default-in dinglam leh veilamah an float lo kan ti a, mahse box pahnihte khi veilamah an rawn awm sa bawk si a. Hei hi a chhan chu, element reng reng hi browser hian veilam atanga dinglam hawia a rem thin vang a ni. Tichuan tunah chuan kan box pahnihte khi kan float lova, tuna a lem ami ang hian an lo lang ta a ni.

Tunah chuan CSS khi han siam danglam hlek ila, box pahnihte khi kan 'float:left' dawn a ni.

CSS:

.box1 {
   background:red;
   float:left;
   height:30px;
   text-align:center;
   width:400px;
}
.box2 {
   background:blue;
   float:left;
   height:30px;
   text-align:center;
   width:400px;
}

float:left

Box pahnihte kan 'float:left' hnu chuan tiang hian a lo lang leh ta a. Kan float left hma kha chuan BOX 1 hian a dinglam sir zawng zawng hmunruak awm kha a la hauh vek a. Mahse, kan float hnuah erawh chuan a hlai zawng leh san zawng chiah hmun a luah ta a, veilama kan float avangin veilam pang hmunruak awm luahkhah a tum dawn a ni. Tiang chiah chuan BOX 2 pawh kan 'float:left' avangin a veilama hmunawl awm a rawn zawng a. BOX 1 dinglama hmunruak insiam kha a rawn luahkhat a, BOX 1 luah bak zawng hmunawlah chuan a rawn awm ta a ni. A lema a lan dan hian, BOX 1 zawh chiahah a rawn awm ta a ni.

Box pahnih hi 'float:right' leh ta ila, engtinnge a awm ang le?. CSS siamtha leh hlek ang aw.

CSS:

.box1 {
   background:red;
   float:right;
   height:30px;
   text-align:center;
   width:400px;
}
.box2 {
   background:blue;
   float:right;
   height:30px;
   text-align:center;
   width:400px;
}

float:right

BOX 1 leh BOX 2 kan 'float:right' leh ta a, a lema mi ang hian a lo lang leh ta a ni. HTML kan ziahah khan BOX 1 hi a awm hmasa zawk a nih kha. BOX 1 khi kan 'float:right' chiah khan, dinglam hmunawl awmah a tawlh phei a, tichuan a veilamah chuan hmunawl a siam ve leh thung a. BOX 2 kan float right ve leh avang khan BOX 1 veilam hmunawl awm chu a rawn luah ve leh ta a ni. A lem ang khian, BOX 1 veilam chiahah BOX 2 chu a rawn awm ve leh ta a ni.

Tunah chuan BOX 1 hi 'float:left' ila, BOX 2 hi 'float:right' ve thung ang.

CSS:

.box1 {
   background:red;
   float:left;
   height:30px;
   text-align:center;
   width:400px;
}
.box2 {
   background:blue;
   float:right;
   height:30px;
   text-align:center;
   width:400px;
}

Float Left and Right

A hmasa entirna pahnih en chuan hei chu a ngaihruat theih tawh viau ang. BOX 1 khi veilamah a tawlh phei a, a dinglam hmunruakah BOX 2 a rawn awm ve leh a ni. Mahse, a danglamna chu BOX 2 hi kan float left avangin BOX 1 dinglam hmunruakah tho khian dinglamah a tawlh phei a, BOX 1 hlat lamah a awm ta a ni.

Tuna mi letling chiah hian BOX 1 khi 'float:right' ila, BOX 2 hi 'float:left' ve thung ta ila, a hnuaia a lem ang khuan a lo awm ang. Chianglo chu comment lamah inzawt leh mai ang aw.

Source:http://www.herawt.com