Қалқымаларды пайдаланып сайт торын қалай құруға болады: ағыннан құлау

Қалқымаларды пайдаланып сайт торын қалай құруға болады: ағыннан құлау
Қалқымаларды пайдаланып сайт торын қалай құруға болады: ағыннан құлау
Anonim

Флоаттың кемшіліктеріне назар аударайық. Блоктық және кірістірілген элементтер бір-бірімен қалай әрекет етеді және оларды бірге пайдалану керек пе. Шығын дегеніміз не және оны қалай шешуге болатындығын талдап көрейік.

Қалқымаларды пайдаланып сайт торын қалай құруға болады: ағыннан құлау
Қалқымаларды пайдаланып сайт торын қалай құруға болады: ағыннан құлау

Соңғы мақалада біз қалқымаларды пайдаланып сайт үшін қарапайым тор құрғанымызға қарамастан, олар бастапқыда мәтіндегі элементтер ағынын реттеуге арналған. Float үш мағынаны білдіреді: сол жақ - элементтер сол жақ жиекке жабысады; оң жақ - элементтер оң жақ жиекке басылған; жоқ - орау режимі өшірілген.

Қалқымалы оралған элементтің өлшемі мен төселуі мүмкін, бірақ егер элемент ішке салынған болса, ол блок элементі сияқты әрекет етеді.

.block1 {

қалқымалы: сол жақта;

ені: 150px;

}

.block2 {

өзгермелі: оң;

ені: 150px;

}

Ағыннан түсіп жатқан флоттарды пайдалану кезінде тағы бір мәселе бар. Ол блоктар бірінен соң бірі өткенде пайда болады, бірақ олардың тек біреуінде ғана float қасиеті болады, сонда ол қалған блоктардың үстінде болады, өйткені ол басқа блоктарды көрмейді. Кірістірілген элементтер флоат элементтерін айнала қоршайды, бірақ бұл мәтіннен тұратын блок флот элементінің астында қалады.

Кескін
Кескін

Бірақ флоат флотпен қалай әрекеттеседі?

Олар өзін мәтін сияқты ұстайды: бос орын болған кезде олар бірінен соң бірі тұрады, содан кейін жаңа жолға ауысады. Сондықтан, біз қалқымалардың көмегімен торлар сала бастадық. Егер бос орын қалмаса, онда олар сайттың енінен асып кетеді, яғни олар ешқайда кетпейді.

Егер флоат қарапайым блок элементтерін көрмесе, онда блок элементтерін флотты көруге үйретуге болады. Біз барлық жағынан ораманы өшіретін (немесе таңдалған жақтан) анық қасиетті қолданамыз. Яғни, мөлдір элемент қалтқысы бар элементтің астына түседі.

Ұсынылған: