CSS Layout - clear and clearfix

-

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

المقصود ب Clear هو مسح float ل element الي بكون موجود يمين او يسار . 

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

clear: value;

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


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

يتم تحريك Element  لأسفل لمسح العناصر التي لها float الى اليسار

div { clear: left; }

right

يتم تحريك Element  لأسفل لمسح العناصر التي لها float الى اليمين

div { float: right; }

both

يتم تحريك Element  لأسفل لمسح العناصر التي لها float الى اليسار واليمين 

div { clear: both; }

none

لن يتم تحريك element لمسح float

div { clear: none; }

inherit

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

div { clear: inherit; }

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

<!DOCTYPE html>
<html>
<head>
<style>
.wrapper{
  border:1px solid black;
  padding:10px;
}
.left {
  border: 1px solid black;
  clear: left;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: left;
  margin: 0;
  background-color: pink;
  width:20%;
}
p {
  width: 50%;
}
</style>
</head>
<body>
    <div class="wrapper">
        <p class="black"> كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p>
        <p class="red"> كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p>
        <p class="left"> كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ. This paragraph clears left.</p>
      </div>
      
</body>
</html>
شغل الصفحة وشوف النتيجة:
The clearfix Hack
إذا كان element الذي له float  أطول من element الذي يحتويه مثلا صورة أطول من div، فبالتأكيد سيتم عرض هذا element خارج  حدود container الخاصة به. لحل هذه المشكلة يمكن إضافة اختراق clearfix:

تمام نضيف مثال حتي نشوف كيف ممكن يتم هاذ الاشي :

<!DOCTYPE html>
<html>
<head>
<style>
.wrapper{
  border:1px solid black;
  padding:10px;
  
}
.img1 {
  float: right;
}
.img2 {
  float: right;
}
.clearfix {
    border:1px solid black;
  padding:10px;
  overflow: auto;
  float: left;
}
</style>
</head>
<body>
    <div class="wrapper">
        <p ><img class="img1" src="bellAlert.gif">  كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p>
    </div>
    <div class="clearfix">
        <p ><img class="img2" src="bellAlert.gif">  كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p>
    </div>
      
</body>
</html>
شغل الصفحة وشوف النتيجة :
شوف كيف النتيجة حيث استخدمنا Clearfix مع الجرس في الجزء الثاني وتم ادخال كامل الصورة داخل المربع