CSS – الطفو float

خاصية float من اكثر الخواص استخداما مع عناصر HTML لتنسيق شكل الصفحة. عناصر HTML يتم عرضها بشكل تسلسليز لكن كثيرا ما نحتاج ان يتم عرض عناصر بجانب بعضها مثلا المحتوى الرئيسي في الجانب الايمن والقائمة تشغل ربع حجم الشاشة في اليسار. تساعدنا خاصية float على جعل عناصر HTML لتحقيق ذلك. ايضا تاخذ الخاصية float قيمتين right و left. وهناك اكثر من حالة ممكن استخدام الخاصية فيها:

عرض صورة بجانب النص

يمكننا عرض صورة بجانب نص ما، وذلك باستخدام الخاصية float سواء right او left.

img  {
  float: right;
}

تقسيم الصفحة الى جزء رئيسي و جزء جانبي

يمكننا ايضا تقسيم الصفحة الى جزء الصفجة الى جزء رئيسي وجزء جانبي وذلك باستخدام العنصر div مع الخاصية float لتحديد ما يتم عرضه يمينا ويسارا و الخاصية width لتحديد نسبة كل من العنصرين:

#sidebar{
	float: left;
	width: 25%;
	background: green;
}


#maincontent{
	float: right;
	width: 75%;
	background:#555555;
}

تقسيم المحتوى الى مجموعة من الاعمدة

يمكننا ايضا تقسيم الصفحة الى جزء الصفجة الى اعمدة وذلك باستخدام العنصر div مع الخاصية float لتحديد ما يتم عرضه يمينا ويسارا و الخاصية width لتحديد نسبة كل من عناصر HTML:

#columnContent{
	float: left;
	width: 33.3%;
	border-width: 2px;
	padding-width: 5px;
	box-sizing: border-box;
}

نلاحظ استخدام الخاصية box-sizing: border-box وذلك لان استخدامنا للحدود border و الحاشية padding تجعل حجم العناصر (33.3 % + 33.3% + 33.3% + 2px + 2px + 2px + 5px +5px +5px) اكبر من 100% من عرض الشاشة. وبذلك لن يتم عرض كل الاعمدة في صف واحد. لذا نستخدم الخاصية box-sizing: border-box لجعل عرض عنصر HTML الذي هو 33.3% يشمل الحاشية و الحدود. (راجع درس Box Model).