خانه دوره‌های رایگان آموزش رایگان HTML و CSS ویژگی float در CSS | آموزش کنار هم قرار دادن عناصر HTML

ویژگی float در CSS | آموزش کنار هم قرار دادن عناصر HTML

دسته‌ها: آموزش رایگان HTML و CSS، دوره‌های رایگان

چهارشنبه 14 خرداد 1399

در این جلسه از آموزش رایگان HTML و CSS می‌خواهیم به ویژگی float در CSS بپردازیم.

همانطور که می‌دانید عناصری که در دسته inline-level وجود دارند، بصورت پیشفرض می‌توانند در کنار هم قرار بگیرند. برای مثال اگر شما چند تگ a یا تگ span را پشت هم بنویسید، در خروجی همه آنها بصورت یک سطر در کنار هم نمایش داده می‌شوند.

اما برای عناصری که در دسته block-level هستند چه؟ اگر بخواهیم این عناصر را در کنار هم قرار دهیم باید چه کنیم؟ برای اینکار چندین راه مختلف وجود دارد که ساده‌ترین، ابتدایی‌ترین و پرکاربرد‌ترین آن‌ها استفاده از ویژگی float در CSS است.

ویژگی float در CSS دقیقا چه کاری انجام می‌دهد؟

ویژگی float در CSS می‌تواند عناصر HTML را در جهت خاصی شناور کند. به مثال زیر دقت کنید:

<div style="background:pink; padding:10px;">
	<img src="https://adminesite.com/wp-content/uploads/2020/06/css-floats-300x206.png" alt="CSS floats">
	<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. </p>
</div>

<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. </p>

</div>

توضیح کد بالا: در این مثال با استفاده از تگ div یک باکس ایجاد کردیم. درون این باکس از یک تصویر و پاراگراف استفاده کردیم. به خروجی کد دقت کنید:

خروجی کد بالا:

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.

حال اگر بخواهیم تصویر را به سمت راست شناور کنیم. طوری که متن در سمت چپ آن قرار گیرد، می‌توانیم از ویژگی float برای تصویر استفاده کنیم. این ویژگی کلاً می‌تواند ۲ مقدار به خود بگیرد. right یا left که به ترتیب یعنی شناور شدن به سمت راست یا چپ. به کد زیر و خروجی آن دقت کنید:

<div style="background:pink; padding:10px; overflow:auto;">
	<img src="https://adminesite.com/wp-content/uploads/2020/06/css-floats-300x206.png" alt="CSS floats" style="float:right; margin-left:10px;">
	<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. </p>
</div>

</div>

خروجی کد بالا:

به همین راحتی توانستیم تصویر را در جهت دلخواه خود شناور کنیم!

نکته: استفاده از ویژگی float مشکلاتی را هم ایجاد می‌کند. اگر به یک عنصر float بدهیم، پدر آن عنصر دیگر آن را حس نمی‌کند. یعنی انگار همچین فرزندی ندارد!

برای حل مشکلی که در نکته بالا گفته شد دو راه حل وجود دارد. اولین و ساده‌ترین آن را در مثال بالا مشاهده کردید. فقط کافیست به عنصر پدر (در این مثال عنصر div) ویژگی overflow را با مقدار auto بدهید.

توجه: عملکرد ویژگی overflow در درس‌های آینده توضیح داده خواهد شد. فعلاً می‌توانید آن‌را حفظ کنید.

راه حل دوم استفاده از کلاس clearfix است که بسیار رایج تر است. در ادامه این روش را توضیح خواهیم داد.

کلاس clearfix چیست و چکار می‌کند؟

همانطور که گفتیم برای مشکل float راه حلی ارائه شد بنام کلاس clearfix. برای استفاده از این کلاس کافیست کد زیر را در قسمت CSS صفحه وب خود قرار دهید (فرقی نمی‌کند کدهای CSS شما Internal باشد یا External):

.clearfix::after {
	content: '';
	clear: both;
	display: table;
}

.clearfix::after {

content: '';

clear: both;

display: table;

}

توضیح اینکه هرکدام از ویژگی‌های تعریف شده برای کلاس clearfix چه کاری انجام می‌دهند، به دلیل سطح دانش فعلی شما امکانپذیر نیست. همانطور که گفتم. فعلا می‌توانید فقط این کدها را حفظ کنید.

با قرار گرفتن کد بالا در قسمت CSS صفحه وب شما، از این به بعد برای هر عنصری که از ویژگی float استفاده کردید، باید به پدر آن عنصر کلاس clearfix را بدهید تا مشکل float را حل کند. به همین راحتی.

حال کد بالا را می‌توان اینگونه نوشت:

<div style="background:pink; padding:10px;" class="clearfix">
	<img src="https://adminesite.com/wp-content/uploads/2020/06/css-floats-300x206.png" alt="CSS floats" style="float:right; margin-left:10px;">
	<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. </p>
</div>

</div>

همانطور که می‌بینید بجای استفاده از ویژگی overflow در عنصر div پدر، از کلاس clearfix استفاده شده.

چینش عناصر HTML با استفاده از float

حال می‌خواهیم مثالی از چینش چندین عنصر block-level در کنار هم بزنیم تا با کاربرد‌های float بیشتر آشنا شویم. به کد زیر دقت کنید:

<html>
	<head>
		<style>
			.child {
				width: 100px;
				height: 100px;
				background: pink;
				margin: 5px;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="child">فرزند اول</div>
			<div class="child">فرزند دوم</div>
			<div class="child">فرزند سوم</div>
		</div>
	</body>
</html>

<html>

<head>

<style>

.child {

width: 100px;

height: 100px;

background: pink;

margin: 5px;

}

</style>

</head>

<body>

<div class="child">فرزند اول</div>

<div class="child">فرزند دوم</div>

<div class="child">فرزند سوم</div>

</div>

</body>

</html>

خروجی کد بالا:

فرزند اول

فرزند دوم

فرزند سوم

در این مثال با اینکه به هرکدام از عناصر div که کلاس child دارند عرض و ارتفاع ۱۰۰ پیکسل دادیم، ولی با این حال در هنگام نمایش در کنار هم نمایش داده نمی‌شوند. خب این به دلیل block-level بودن این عناصر طبیعی است.

برای چیدن این عناصر در کنار هم کافیست از ویژگی float برای عناصر child استفاده کنیم:

<html>
	<head>
		<style>
			.clearfix::after {
				content: '';
				clear: both;
				display: table;
			}
			.child {
				width: 100px;
				height: 100px;
				background: pink;
				margin: 5px;
				float: right;
			}
		</style>
	</head>
	<body>
		<div class="parent clearfix">
			<div class="child">فرزند اول</div>
			<div class="child">فرزند دوم</div>
			<div class="child">فرزند سوم</div>
		</div>
	</body>
</html>

<html>

<head>

<style>

.clearfix::after {

content: '';

clear: both;

display: table;

}

.child {

width: 100px;

height: 100px;

background: pink;

margin: 5px;

float: right;

}

</style>

</head>

<body>

<div class="child">فرزند اول</div>

<div class="child">فرزند دوم</div>

<div class="child">فرزند سوم</div>

</div>

</body>

</html>

خروجی کد بالا:

فرزند اول

فرزند دوم

فرزند سوم

همانطور که می‌بینید خروجی دقیقا همان چیزی که مدنظر ما بود، شد. به این نکته دقت کنید که برای عنصر پدر هم از کلاس clearfix استفاده شد.

معرفی تگ div و span و کاربرد آنها در زبان HTML درس قبلی

معرفی عناصر layout در HTML درس بعدی

10 پاسخ به “ویژگی float در CSS | آموزش کنار هم قرار دادن عناصر HTML”

محمد گفت:
۲۸ دی ۱۴۰۲ در ۱۲:۲۶ ب٫ظ
سلام و عرض ادب .ممنون بابت سایت خوبتون .چطوری میشه دو تا عکس که زیر هرکدومشون نوشته های متفاوتی از نظر اندازه متن هست رو الاین کرد
- علی سلطانی گفت:
  ۲۹ دی ۱۴۰۲ در ۱۰:۰۶ ق٫ظ
  سلام وقت بخیر
  سوالتون خیلی کلی هست و نمیدونم دقیقا شما میخواید چکاری انجام بدید. اما بصورت کلی شما با استفاده از ویژگی text-align می‌تونید عناصر الاین inline-level رو تنظیم کنید.
  موفق باشید
محمدحسین گفت:
۲۴ بهمن ۱۴۰۰ در ۱۲:۵۴ ب٫ظ
سلام یه راه حل دیگ هم وجود داره
اینکه به عنصر پدر display inline-block بدهیم . بعدش میشناسه فرزندشو
سید امیر محمد حسینی گفت:
۱۴ تیر ۱۴۰۰ در ۲:۰۵ ق٫ظ
ببخشید من سوالم اینه که این سایت هم با html cssنوشه شده یعنی هر صفحه جداگونه با اینا کد نوشته شده یا نه و در این مورد توضیح بدید ممنون
- مریم جعفرپور گفت:
  ۱۴ تیر ۱۴۰۰ در ۶:۱۶ ب٫ظ
  سلام هر وب‌سایتی که مشاهده می‌کتید بخش ظاهری سایت به کمک html css نوشته شده است.
مهدی گفت:
۳ دی ۱۳۹۹ در ۶:۱۱ ب٫ظ
سلام من این مقاله رو کامل خوندم اما چطوری می تونم ادامه توضیحات رو بخونم؟
- مریم جعفرپور گفت:
  ۴ دی ۱۳۹۹ در ۵:۵۴ ب٫ظ
  سلام دوست عزیز لیست دروس بعدی در سمت راست صفحه لیست شده (البته اگر با گوشی وارد شدید در پایین صفحه در بخش تیره رنگ) که میتونید وارد درس بعدی بشید.
محمد گفت:
۲۳ آبان ۱۳۹۹ در ۴:۴۳ ب٫ظ
سلام.یه تمرین دارم که:10تا عکس بصورت افقی کنار هم قرار بگیرن وزیر هر عکس با شماره گذاری (pic1 ,…).فقط این باید با forوبا خاصیتfloatنوشته بشه.ممنون میشه کمکم کنین
aminrezaee گفت:
۱۸ شهریور ۱۳۹۹ در ۶:۰۳ ب٫ظ
با سلام اگ تا بع فرزند درون چندین تگ div قرار داشت ما از کلاس clearfix در کدام تگ div استفاده کنیم ؟
- مریم جعفرپور گفت:
  ۱۸ شهریور ۱۳۹۹ در ۷:۴۱ ب٫ظ
  سلام باید به والد مستقیم تگ float شده داده شه.

دیدگاهتان را بنویسید لغو پاسخ

You must be logged in to post a comment.