Сайттың торлы дизайнын қарастырайық және жеке компоненттерді бөліп қарастырайық. Float-тің не үшін пайдалы екенін, сонымен қатар үш ағыннан бірінші веб-тор құрудың танымал әдісін және сайттың төменгі колонтитулын қарастырайық.
Тораптың торлы құрылысын зерттеу үшін сіз «ағын» дегенді түсінуіңіз керек. Ағын - бұл сайттың элементтері, бірінен соң бірі орналасқан. Мысалы, бұл әдепкі бойынша бірінен соң бірі жүретін div элементтері болуы мүмкін. Бірақ ағынды қайта реттеуге болады, ал блок элементтерінің орналасуын өзгертуге болады.
Ағынды басқару үшін біз блокты солға немесе оңға орналастыра алатын float қасиетін қолданамыз. CSS файлына жазу жеткілікті:
«class or block name» {float: right / left; }
Флоаттың жалғыз кемшілігі - бір блокты екіншісіне «қабаттастыру» мүмкіндігі.
Бітуге жол бермеу үшін біз түсінікті түрде қолданамыз: екеуі де - бұл қасиет блоктың айналасындағы ағынды орнатады. Біз ені мен биіктігін максималды және минималды етіп белгілейміз, осылайша мән мазмұнның (мәтін, суреттер) өлшеміне сәйкес қалыптасады. Маржа - блоктың орналасуына байланысты сыртқы шеттер автоматты түрде құрылатындай етіп, мәнді автоматты етіп орнатыңыз.
Флоат блоктарды екі бағытта орналастыра алатындықтан, сайтты ағындарға бөлу әдеттегідей - солға және оңға. Егер бағдарламалаушыға тек екі ағын қажет болса, онда ол сол және оң қалқымаларды қалдырады, ал егер екеуден көп болса, онда ол маржаны пайдаланып жиектерді реттейді. Бұл қалай болады:
.column1 {өзгермелі: сол жақта; ені: 65px; мин-биіктігі: 50px; оң жақ шеті: 9px; // орта жақтан 9px}
2 ағын:
.column2 {қалтқы: сол; // сол жақ блокқа, бірақ «қабаттаспай», өйткені біз шеттің енін қолдандық: 80px; мин-биіктігі: 50px; }
3 ағын:
.column3 {қалтқы: оң; ені: 65px; мин-биіктігі: 50px; }
Төменгі деректеме (.footer):
.footer {анық: екеуі де; // екі жағына да ораңыз}
Осылайша біз үш ағыннан тұратын float көмегімен торап жасадық.
