تخطيط CSS - تحليك وغسل

تخطيط CSS - تحليك وغسل

CSS float تحدد الصفة كيفية ت浮动 العنصر.

CSS clear تحدد الصفة أي العناصر يمكن أن تطفو بجانب العنصر المزيل وتأتي منه.

صفة float

float تستخدم الصفة لتحديد الموقع وتنسيق المحتوى، مثل جعل الصورة تطفو إلى اليسار إلى النص في الصندوق.

float يمكن للصفة إعداد أحد القيم التالية:

  • left - يطفو العنصر إلى الجانب الأيسر من صندوقه
  • right - يطفو العنصر على الجانب الأيمن من صندوقه
  • none - لن ي浮动 العنصر (سيظهر في الموضع الذي ظهر فيه النص). القيمة الافتراضية.
  • inherit - يرث العنصر قيمة float من والده

أبسط استخدام هو،float يمكن للصفة تحقيق تأثير (في الصحف) حول الصورة النصية.

مثال - float: right;

في هذا المثال، يتم تحديد أن الصورة يجب أن تكون في النص وت浮动 إلى اليمين:

الكمثرى

دروس تقنيات الويب الرائدة - مجانية بالكامل. في CodeW3C.com، يمكنك العثور على جميع الدروس التي تحتاجها لبناء موقعك. من أساسيات HTML إلى CSS، وحتى تقنيات متقدمة مثل XML، SQL، JS، PHP.

كتيبنا المرجعي يغطي جميع جوانب تقنيات الويب. بما في ذلك معايير W3C: HTML، CSS، XML. بالإضافة إلى تقنيات أخرى مثل JavaScript، PHP، SQL.

في CodeW3C.com، نقدم آلاف الأمثلة. من خلال استخدام محررنا عبر الإنترنت، يمكنك تعديل هذه الأمثلة والتجربة على الشيفرة.

مثال

img {
  float: right;
}

جرب بنفسك

مثال - float: left;

في هذا المثال، يتم تحديد أن الصورة يجب أن تكون في النصإلى اليسارال浮动:

الكمثرى

دروس تقنيات الويب الرائدة - مجانية بالكامل. في CodeW3C.com، يمكنك العثور على جميع الدروس التي تحتاجها لبناء موقعك. من أساسيات HTML إلى CSS، وحتى تقنيات متقدمة مثل XML، SQL، JS، PHP.

كتيبنا المرجعي يغطي جميع جوانب تقنيات الويب. بما في ذلك معايير W3C: HTML، CSS، XML. بالإضافة إلى تقنيات أخرى مثل JavaScript، PHP، SQL.

في CodeW3C.com، نقدم آلاف الأمثلة. من خلال استخدام محررنا عبر الإنترنت، يمكنك تعديل هذه الأمثلة والتجربة على الشيفرة.

مثال

img {
  float: left;
}

جرب بنفسك

مثال - لا يوجد float

في هذا المثال، سيتم عرض الصورة في الموضع الذي ظهر فيه النص (float: none;):

الكمثرى دروس تقنيات الويب الرائدة - مجانية بالكامل. في CodeW3C.com، يمكنك العثور على جميع الدروس التي تحتاجها لبناء موقعك. من أساسيات HTML إلى CSS، وحتى تقنيات متقدمة مثل XML، SQL، JS، PHP. كتيبنا المرجعي يغطي جميع جوانب تقنيات الويب. بما في ذلك معايير W3C: HTML، CSS، XML. بالإضافة إلى تقنيات أخرى مثل JavaScript، PHP، SQL. في CodeW3C.com، نقدم آلاف الأمثلة. من خلال استخدام محررنا عبر الإنترنت، يمكنك تعديل هذه الأمثلة والتجربة على الشيفرة.

مثال

img {
  float: none;
}

جرب بنفسك

قراءة متقدمة

كتب خارجية:غرق CSS