CSS Layout - float and clear

-

المقصود float هو تحديد مكان (الطفو) ل elements بالنسبة للكتلة المحتوية له containing block بحيث يتم التحكم بمكانه الى الجانب الايمين او الايسر (اخراج element من المكان الطبيعي له)، الامر الذي يجعل ال elements حولها تلتف حوله (تطفو حوله)

طريقة الكتابة.

 float: value;

القيمة هنا تكون واحد من :


القيمة 
الوصف
left

يكون float الى اليسار من containing block

div { float: left; }

right

يكون float الى المين من containing block

div { float: right; }

none

لن يتم تحديد float

div { float: none; }

inherit

سيتم تطبيق float بناء على parent element

div { float: inherit; }

نطبق مثال حتي نفهم الموضوع.
نعمل صفحة HTML باسم Float ونضيف الكود التالي :

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: right;
}
</style>
</head>
<body>
    <div>
        <p>
            <img src="bellAlert.gif">
            كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.
            
        <p>كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.
      </div>
</body>
</html>
شغل الصفحة وشوف النتيجة:

لاحظ مكان الصورة بالنسبة للنص. 

تمام نجرب نحذف الكود الخاص ب Float ونشوف النتيجة 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div>
        <p>
            <img src="bellAlert.gif">
            كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.
            
        <p>كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.
      </div>
</body>
</html>
ونفس هذه النتيجة يمكن تطبيقها  باستخدام القيمة none 
img {
  float: none;
}
طبق float الى أجانب الايسر وراسلنا اذا في مشاكل او ملاحظات.

من ميزات float تستخدم لعرض element بجانب بعض ، حيث ان الوضع الطبيعي ل element في Html عرضها فوق بعض. طيب تمام نشوف كيف ممكن نعرض اكثر من element بجانب بعض 
نطبق المثال التالي :

<!DOCTYPE html>
<html>
<head>
<style>
    div {
  float: left;
  padding: 15px; 
  border: 1px solid rgb(36, 35, 35);
  height: 250px;
  width: 250px;
}
img {
  float: right;
}
</style>
</head>
<body>
         <div>
            <img src="bellAlert.gif">
            كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.
        </div>  
        <div> 
        كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.
      </div>
</body>
</html>
شغل الصفحة وشوف النتيجة :
جرب تغير float وشوف النتيجة وراسلنا .