Clearing floats 

بسم الله الرحمن الرحيم

سوف نتكلم اليوم عن خدعه من خدع css عن شئ مهم يدعي الـ clearing floats
لمن لا يعرف الـ clearing floats
ببساطه عندما يكون لدينا Box1 بداخلهBox2 له قيمه float سواء كانت right أو left فإن حدود Box1 أو الخلفيه له لن تتمد حتي تحتوي Box2 كما نتوقع
قد يبدو الكلام أصعب من الواقع إذن تابع معي المثال التالي  :

<div id="box1">
	box1 !!!
<div id="box2">box2 !!</div>
</div>
div#box1 {
	border: 3px solid blue;
	width: 300px;
	background-color: #C1C1FF;
	padding: 5px;
}

div#box2 {
	float: right;
	margin: 0;
	border: 3px solid red;
	width: 150px;
	height: 140px;
	background: #FFC6B3;
}

عند تنفيذ الأكواد ينتج الشكل التالي :

أعتقد الأن أن المشكله قد وضحت وهي أن Box1 لا يتمدد ويحوي Box2
معظم المطورين يتغلبون علي هذه المشكله ببساطه بإضافه divفارغ مع إعطائه القيمه clear:both  ليصبح الكود بالشكل التالي :

<div id="box1">
	box1 !!!
<div id="box2">box2 !!</div>
<div style="clear:both"></div>
</div>

لكن يعيب هذه الطريقه أنها تجعل التصميم غير نظيف ويحتوي علي أكواد XHTML لافائده منها علاوه علي ذلك يوجد طريقه أسهل وأكثرإحترافيه
تقوم هذه الطريقه علي إستخدام خاصيه after وهي خاصيه قياسيه في css2 ومدعومه من كافه المتصفحات الحديثه تستطيع من خلالها إضافه محتوي للصفحه عن طريق css إذن جرب الأن هذا الكود :

<div id="box1" class="clearfix">
	box1 !!!
<div id="box2">box2 !!</div>
</div>
div#box1 {
	border: 3px solid blue;
	width: 300px;
	background-color: #C1C1FF;
	padding: 5px;
}

div#box2 {
	float: right;
	margin: 0;
	border: 3px solid red;
	width: 150px;
	height: 140px;
	background: #FFC6B3;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

هذا الكود يعمل علي كافه المتصفحات القياسيه IE8 FF2 FF3 FF3.5 safari chrome لكن ماذا عن IE6 و IE7 ؟
أساساً IE6 IE7 لديهم خاصيه إزاله الـ float تلقائياً لكن يجب أن تكون قيمه zoom تساوي 1
لذلك وللتأكد من أن الخدعه سوف تعمل علي جميع المتصفحات حتي المتصفح التاريخي IE5.5 نضيف الكود التالي :

<!--&#91;if IE&#93;>
<style type="text/css">
  .clearfix {
    zoom: 1;
    display: block;
 </style>
<!&#91;endif&#93;-->

الأن الكود يعمل علي جميع المتصفحات بدون زياده حرف في أكواد XHTML
Bookmark and Share

Advertisements