CSS1 થી સ્પષ્ટ સીએસએસ પ્રોપર્ટી સીએસએસનું એક ભાગ રહી છે. તે તમને સ્પષ્ટ કરે છે કે શું સાફ કરેલો ઘટકની બાજુમાં અને કઈ બાજુ (ઓ) પર તત્વો ફ્લોટ કરી શકે છે. સ્પષ્ટ મિલકતમાં પાંચ શક્ય કિંમતો છે:
- કંઈ નહીં
- બાકી
- અધિકાર
- બંને
- બોલાવે છે
CSS સ્પષ્ટ સંપત્તિનો ઉપયોગ કેવી રીતે કરવો
તમે એક તત્વ પર ફ્લોટ પ્રોપર્ટીનો ઉપયોગ કર્યા પછી સ્પષ્ટ મિલકતનો ઉપયોગ કરવાની સૌથી સામાન્ય રીત છે. દાખ્લા તરીકે:
મારી છબીની બાજુમાં ટેક્સ્ટ કરો
ટેક્સ્ટ જે મારી છબી નીચે છે
સાફ કરવા માટેના બધા ઘટકો ડિફોલ્ટ: કંઈ નહીં; , તેથી જો તમે કોઈ અન્ય ઘટકોને બાજુમાં ફ્લોટ કરવા માંગતા નથી, તો તમારે સ્પષ્ટ શૈલી બદલવી જોઈએ.
જ્યારે તમે ફ્લોટ્સ ક્લિઅર કરી રહ્યાં છો, ત્યારે તમે તમારા ફ્લોટ પર સ્પષ્ટ રીતે મેળ ખાય છે. તેથી જો તમે ડાબી બાજુએ તત્વ ગોઠવ્યું હોય, તો તમારે ડાબેથી સાફ કરવું જોઈએ તમારું ચાલુ તત્વ ફ્લોટ કરવાનું ચાલુ રાખશે, પરંતુ સાફ કરેલ તત્વ અને તે પછીની દરેક વસ્તુ વેબ પૃષ્ઠ પર તેની નીચે દેખાશે.
જો તમારી પાસે તત્વો કે જે બંને જમણી અને ડાબી બાજુએ ચાલે છે, તો તમે માત્ર એક બાજુ સાફ કરી શકો છો અથવા તમે બન્નેને સાફ કરી શકો છો.
લેઆઉટ્સમાં સ્પષ્ટ ઉપયોગ કરવો
સૌથી સામાન્ય રીતે સૌથી ડિઝાઇનર્સ સ્પષ્ટ મિલકતનો ઉપયોગ પાનું ઘટકોના લેઆઉટમાં છે . તમારી પાસે ટેક્સ્ટના બ્લોકની અંદર ફ્લોટિંગ એક છબી હોઈ શકે છે અને આગામી ફકરાને છબીની નીચે શરૂ કરવા માંગો છો, અથવા તમારી પાસે ટેક્સ્ટની એક સંપૂર્ણ કૉલમ હોઈ શકે છે કે જે તમે ટેક્સ્ટના બીજા ભાગની બાજુમાં ફ્લોટ કરવા માંગો છો, નીચે કેટલાક ટેક્સ્ટ દેખાય છે.
આ ફોર્મમાં લેઆઉટ માટેનું HTML અહીં છે.
તેમાં એક DIV કન્ટેનર છે જે બીજાને હોલ્ડ કરે છે જે ડાબેથી શરૂ થાય છે.
એક ટૂંકા શરૂ DIV
કન્ટેનર ડીવીની અંદરના સામગ્રીઓ જે ડાબેરી દિશામાં જમણી બાજુ હશે.
આ દંડ કામ કરશે, મુખ્ય DIV બાકીના સમાવિષ્ટોની ડાબી બાજુમાં તટસ્થ ટૂંકા ભાગ સાથે.
તમે ટેગને ખાલી કરીને ઉમેરીને ફ્લોટિંગ બૉક્સની બાજુના ટેક્સ્ટને સાફ કરી શકો છો જ્યાં તમે ઇચ્છો કે તે પ્રારંભિક બોક્સ હેઠળ લખવાનું શરૂ કરે.
પરંતુ જ્યારે સમસ્યા ઊભી થાય છે ત્યારે તેના પછીના સમાવિષ્ટોની લંબાઇ હવે લાંબી છે. પછી, જેમ તમે જોઈ શકો છો, મુખ્ય બોક્સનો બેકગ્રાઉન્ડ રંગ ફ્લોટિંગ બૉક્સના નીચે નહીં આવે.
સદભાગ્યે, આને ઠીક કરવા માટે એક સરળ રીત છે: મિલકત ઓવરફ્લોમાં મુખ્ય બૉક્સ સેટ કરીને: ઑટો; પૃષ્ઠભૂમિ રંગ લાંબા સમય સુધી ચાલતા બૉક્સની નીચે ખૂબ જ તળિયે રહેશે, જેમ કે આ ઉદાહરણમાં બતાવ્યા પ્રમાણે.