സി.എസ്.എസ് 1 മുതൽ വ്യക്തമായ CSS വസ്തു, സിഎസ്എസ് ഭാഗമാണ്. വ്യക്തമാക്കിയ മൂലകത്തിനരികിൽ ഏത് വശങ്ങളിലാണ് ഫ്ലോട്ട് ചെയ്യേണ്ടതെന്ന് വ്യക്തമാക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു. വ്യക്തമായ വസ്തുവിന് അഞ്ച് മൂല്യങ്ങൾ ഉണ്ട്:
- ഒന്നുമില്ല
- ഇടത്തെ
- ശരി
- രണ്ടും
- അവകാശമായി
എങ്ങിനെയാണ് CSS ക്ലിയർ വസ്തു ഉപയോഗിക്കുക
നിങ്ങൾ ഒരു മൂലകത്തിൽ ഫ്ലോട്ട് പ്രോപ്പർട്ടി ഉപയോഗിച്ച ശേഷം വ്യക്തമായ പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നതിനുള്ള സാധാരണ രീതിയാണ്. ഉദാഹരണത്തിന്:
എന്റെ ഇമേജിനടുത്ത് വാചകം അയയ്ക്കുക.
എന്റെ ചിത്രത്തിന് താഴെയുള്ള വാചകം.
എല്ലാ ഘടകങ്ങളും ക്ലിയർ സ്ഥിരമായി: none; അതിനാൽ മറ്റെന്തെങ്കിലും ഘടകങ്ങൾ എന്തെങ്കിലും ഒഴിച്ചുകൂടാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നില്ലെങ്കിൽ, നിങ്ങൾക്ക് വ്യക്തമായ രീതിയിൽ മാറ്റം വരുത്തണം.
നിങ്ങൾ ഫ്ലോട്ടുകൾ മായ്ച്ചുകളയുമ്പോൾ, നിങ്ങളുടെ ഫ്ലോട്ടിനോട് നിങ്ങൾ വ്യക്തമായി പൊരുത്തപ്പെടുന്നു. നിങ്ങൾ ഇടതുവശത്തെ ഘടകം നീക്കിയാൽ, നിങ്ങൾ ഇടതുഭാഗത്തേക്ക് വ്യക്തമാക്കണം. നിങ്ങളുടെ ഉജ്ജ്വലമായ ഘടകം ഫ്ലോട്ട് തുടരും, പക്ഷെ പിന്നീട് മായ്ച്ച ഇനവും എല്ലാം അതിനുശേഷം വെബ് പേജിൽ ദൃശ്യമാകും.
വലത്തേയ്ക്കും ഇടത്തേയ്ക്കും ഒഴുകുന്ന ഘടകങ്ങൾ നിങ്ങൾക്കുണ്ടെങ്കിൽ, നിങ്ങൾക്ക് ഒരു വശത്ത് മാത്രം മായ്ക്കാനാകും അല്ലെങ്കിൽ നിങ്ങൾക്ക് രണ്ടും മായ്ക്കാനാകും.
ലേഔട്ടുകളിൽ വ്യക്തമാക്കുന്നു
മിക്ക ഡിസൈനർമാരും വ്യക്തമായ ഘടകമാണ് പേജ് ഘടകങ്ങളുടെ ലേഔട്ടിലുള്ളത് . ഒരു വാചക ബ്ലോക്കിനുള്ളിൽ നിങ്ങൾക്ക് ഒരു ഇമേജ് ഉണ്ടായിരിക്കാം , അടുത്ത ഖണ്ഡിക ചിത്രത്തിന് ചുവടെ തുടങ്ങുകയോ അല്ലെങ്കിൽ മറ്റൊരു കൂട്ടം പാഠത്തിനടുത്ത് ഫ്ലോട്ട് ചെയ്യാൻ ആഗ്രഹിക്കുന്ന ഒരു വാചകം നിങ്ങൾക്ക് ഉണ്ടാകാം, താഴെ കൊടുത്തിരിക്കുന്ന ചില വാചകം.
ഈ ഫോമിലെ ലേഔട്ടിന്റെ HTML ഇവിടെയുണ്ട്.
ഇടതുവശത്ത് ഉയർത്തിയിട്ടിരിക്കുന്ന മറ്റൊരു ഡിഗ്രി കാണാം.
ഒരു ചെറിയ ഫ്ളാറ്റേറ്റഡ് ഡി
Floated div ന്റെ വലതുഭാഗത്തേക്ക് പോകുന്ന കണ്ടെയ്നർ ഡിവിയിലെ ഉള്ളടക്കങ്ങൾ.
ഇത് പ്രധാന ഡിവിഡിയിലെ ബാക്കി ഭാഗങ്ങളുടെ ഇടതുവശത്തേക്ക് ചലിപ്പിക്കുന്ന ചെറിയ വിഭജിച്ച് പിഴയായി പ്രവർത്തിക്കും.
ഫ്ലോട്ടിംഗ് ചെയ്ത ബോക്സിന് ചുവടെ എഴുതി ഒരു ടാഗ് കൂട്ടിച്ചേർത്ത് ഫ്ലോട്ടിംഗ് ബോക്സിന് അടുത്തുള്ള വാചകം നിങ്ങൾക്ക് മായ്ക്കാൻ കഴിയും.
പക്ഷേ, ഫ്ളോട്ടിംഗ് ബോക്സ് അതിനടുത്തുള്ള ഉള്ളടക്കത്തേക്കാൾ വലുതാണെങ്കിൽ പ്രശ്നം വരുന്നു. പിന്നെ, നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, പ്രധാന ബോക്സിൻറെ പശ്ചാത്തല നിറം ഫ്ലോട്ടിംഗ് ബോക്സിൻറെ താഴെ താഴെയായി നടത്തപ്പെടുന്നില്ല.
ഭാഗ്യവശാൽ, ഇത് പരിഹരിക്കാൻ ഒരു എളുപ്പ മാർഗം ഉണ്ട്: പ്രോപ്പർട്ടി. പ്രധാന ബോക്സ് ഓവർഫ്ലോ ആയി ക്രമീകരിക്കുന്നതിലൂടെ: auto; ഈ ഉദാഹരണത്തിൽ കാണിച്ചിരിക്കുന്നതുപോലെ, ചുവടെയുള്ള ഫ്ളോട്ടിംഗ് ബോക്സിനുമുകളിൽ പശ്ചാത്തല നിറം നിലനിൽക്കും.