Јасна особина ЦСС-а је део ЦСС-а од ЦСС1. Омогућава вам да одредите који елементи могу плутати поред очишћеног елемента и на којој страни. Јасна својина има пет могућих вредности:
- ниједан
- лево
- јел тако
- и једно и друго
- наследити
Како користити ЦСС јасно својство
Најчешћи начин коришћења јасног својства јесте када сте на елементу користили флоат својство. На пример:
Текст поред моје слике.
Текст који је испод моје слике.
Сви елементи су подразумевани да обришу: нема; , па ако не желите да други елементи плутају поред нечега, морате промијенити јасан стил.
Када чистите пловице, јасно се уклапате у ваш пловак. Дакле, ако сте лебдећи елемент на левој страни, онда би требало да обришете лево. Твој пливајући елемент ће наставити да плута, али очишћени елемент и све што следи ће се појавити испод ње на веб страници.
Ако имате елементе који се лебде на десној и левој страни, можете да обришете само једну страну или можете обрисати оба.
Коришћење јасно у Лаиоутс
Најчешћи начин да већина дизајнера користи јасно својство је у изгледу елемената странице . Можда имате слику која плута унутар блока текста и желите да следећи пасус почне испод слике, или можда имате целу колону текста који желите да плутате поред друге групе текстова, а неки текст се појављује испод.
Овде је ХТМЛ за изглед у овом облику.
Има један див контејнер који држи још један који се лебди лево.
Кратки пливајући див
Садржај унутар дивизије контејнера који ће бити десно од пливајућег див.
Ово ће добро функционирати, са краћим дивом плутајућим лево од остатка садржаја главног див.
Текст можете да обришете поред пливајуће кутије једноставним додавањем ознаке у којој желите да почнете да пишете под лебдећу кутију.
Али проблем долази када плутајућа кутија буде дуже од садржаја поред њега. Затим, као што видите, боја позадине главне кутије се не преноси на дно плутајуће кутије.
На срећу, постоји једноставан начин да се то поправи: имовина. Постављањем главне кутије на прелив: ауто; боје позадине ће остати поред дуље плутајуће кутије до самог дна, као што је приказано у овом примеру .