مشکل با مفهوم float در css [بایگانی]

<?php?>

دوشنبه 25 خرداد 1394, 16:03 عصر

سلام دوستان . این کد html + css رو ببینید :

<!doctype html>
<html lang="fa">
<head>
<title>تمرین</title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="index">
<link rel="stylesheet" href="style/style.css" type="text/css">

<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="header">
<div class="header-main">
<img src="shop.png" class="logo"></img>
<div class="logo-text"> دانلود</div>
<div class="logo-text2">دانلود جدید ترین نرم افزار ها</div>
</div>

<div class="header-main2"></div>
</div>
</body>
</html>

اینم css :

*{
padding:0;
margin:0;
border:0;
outline:0;
font-size:100%;
}
body{
direction:rtl;
background-color:#fbfbf9;
}
.header{
width:auto;
height:80px;
background-color:#f0f0f0;
}
.header-main{
width:250px;
height:80px;
background-color:red;
margin-right:300px;
float:right;
}
.logo{
width:60px;
height:55px;
margin:10px 20px;
float:right;

}
.logo-text{
font:bold 12px tahoma;
padding:10px 10px;

}
/* header main 2*/
.header-main2{
width:250px;
height:80px;
background-color:green;
}

اینم عکس اجرا کد ها : http://uupload.ir/files/09xg_052.png

الان قسمت سبز رنگ باید جلوی قسمت قرمز رنگ قرار بگیره . چون من به قسمت قرمز رنگ float:right دادم و شناورش کردم و باکس سبز باید جلوی باکس قرمز بیوفته . مشکلش چبه به نظرتون؟
ممنون از وقتی که میزارید

H:Shojaei

دوشنبه 25 خرداد 1394, 16:31 عصر

فکر میکنم وقتی دایرکشن صفحه رو تغییر میدین float هم نوع تاثیراتش تغییر میکنه و بالعکس میشه...

Gh-Moradi

دوشنبه 25 خرداد 1394, 20:13 عصر

منظورتون به اینصورته؟

*{
padding:0;
margin:0;
border:0;
outline:0;
font-size:100%;
}
body{
direction:rtl;
background-color:#fbfbf9;
}
.header{
width:auto;
height:80px;
background-color:#f0f0f0;
}
.header-main{
width:250px;
height:80px;
background-color:red;
margin-right:10px;
float:right;
}
.logo{
width:60px;
height:55px;
margin:10px 20px;
float:right;

}
.logo-text{
font:bold 12px tahoma;
padding:10px 10px;

}
/* header main 2*/
.header-main2{
width:250px;
height:80px;
float:right;
background-color:green;
margin-right:10px;
}

<?php?>

دوشنبه 25 خرداد 1394, 20:37 عصر

بله کامل درسته . خیلی ممنون از راهنماییتون .
اینو ببینید:

<p class="p1">salam</p>
<p class="p2">khoobi</p>
<p class="p3">che khabar</p>

وقتی به کلاس p1 خاصیت float:right; رو بدیم , پارگراف khoobi روبه رویه پارگراف اولی alam قرار میگیره . در واقع شکل نمایش این کل در مرورگر اینطوریه:

salam khoobi
che khabar

در واقع من به کلاس p2 هیچ خاصیت float:right ندادم .اما خود به خود اومد تویه یک لاین
-----------------------------------------------------------
جالا اینو ببینید :

<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>

اینم کد css این مقال :

.d1{
width:100px;
height:100px;
background-color:red;
margin-right:500px;
float:right;
}
.d2{
width:100px;
height:100px;
background-color:green;
}
.d3{
width:100px;
height:100px;
background-color:black;
}

وقتی به باکس قرمز رنگ خاصیت float:right دادم . باکس سبز رنگ رفت پشت باکس قرمز / در صورتی که همین عمل رو در مثال اول انجام دادم و تگ زیرین در جلویه تگی که float گرفت افتاد . (باید حتما به هر 3 تا باکس خاصیت float right بدم تا هر سه تاشون جلویه هم بیوفتن )

میشه یکی بگه چرا اینطوری میشه؟ علتشو میخوام بدونم ؟ راه حلشو میدونم . چرا css این کارو میکنه . ممنون

pyramid_ali

دوشنبه 25 خرداد 1394, 22:39 عصر

دوست عزیز float به معنای شناور شدن عنصرت هست! حالا توی کدی که تو زدی باید بهت بگم که شما عنصر قرمز رنگ رو شناور کردی . گفتی از سمت راست 300 پیکسل فاصله بگیره و بعدش یک عنصری که شناور نیست رو زیرش تعریف کردی و انتظار داری جلوی اون قرار بگیره؟؟؟اگه بخوام بهتر بگم یعنی اینکه مستطیل قرمز رنگ روی هوا قرار داره و مستطیل سبز به راحتی میاد زیر مستطیل قرمز رنگ ولی چون شما بهشون حاشیه از راست دادین مستطیل قرمز رنگ در طرف چپ مستطیل سبز قرار گرفته! حالا برای اینکار شما باید مستطیل سبز رنگ رو هم شناور کنی به سمت راست تا بعد از مستطیل قرمز قرار بگیره! اگه المنت های دیگه ای هم تعریف کردی و خواستی که زیر عناصر شناورت نیان باید مقدار clear رو توی css اون عنصر تعریف کنی که 3 پارمتر راست و چپ و هردو رو میگیره که معنیش کاملا واضحه! از عناصر شناور خیلی توی طراحی استفاده می شه و شما برای طراحی باید کاملا بهش مسلط باشی!
در ضمن توی مثال آخری که زدید باید بگم که سعی کنید از margin زیاد استفاده نکنید که همین باعث سردرگمیتون شده!
بهترین روش برای فهمیدن عناصر شناور اینه که شما اونا رو مثله طبقه ی دوم یه ساختمان در نظر بگیرید و بقیه عناصر که این خاصیت رو ندارن طبقه ی اول ساختمان! با این توضیح عناصر به راحتی روی یکدیگر قرار می گیرند! مگر اینکه در طبقه ی مربوطه باشن!
بازم اگه جایی رو بد گفتم و متوجه نشدید بگید بهتر راهنماییتون کنم!

<?php?>

سه شنبه 26 خرداد 1394, 10:42 صبح

دوست عزیز float به معنای شناور شدن عنصرت هست! حالا توی کدی که تو زدی باید بهت بگم که شما عنصر قرمز رنگ رو شناور کردی . گفتی از سمت راست 300 پیکسل فاصله بگیره و بعدش یک عنصری که شناور نیست رو زیرش تعریف کردی و انتظار داری جلوی اون قرار بگیره؟؟؟اگه بخوام بهتر بگم یعنی اینکه مستطیل قرمز رنگ روی هوا قرار داره و مستطیل سبز به راحتی میاد زیر مستطیل قرمز رنگ ولی چون شما بهشون حاشیه از راست دادین مستطیل قرمز رنگ در طرف چپ مستطیل سبز قرار گرفته! حالا برای اینکار شما باید مستطیل سبز رنگ رو هم شناور کنی به سمت راست تا بعد از مستطیل قرمز قرار بگیره! اگه المنت های دیگه ای هم تعریف کردی و خواستی که زیر عناصر شناورت نیان باید مقدار clear رو توی css اون عنصر تعریف کنی که 3 پارمتر راست و چپ و هردو رو میگیره که معنیش کاملا واضحه! از عناصر شناور خیلی توی طراحی استفاده می شه و شما برای طراحی باید کاملا بهش مسلط باشی!
در ضمن توی مثال آخری که زدید باید بگم که سعی کنید از margin زیاد استفاده نکنید که همین باعث سردرگمیتون شده!
بهترین روش برای فهمیدن عناصر شناور اینه که شما اونا رو مثله طبقه ی دوم یه ساختمان در نظر بگیرید و بقیه عناصر که این خاصیت رو ندارن طبقه ی اول ساختمان! با این توضیح عناصر به راحتی روی یکدیگر قرار می گیرند! مگر اینکه در طبقه ی مربوطه باشن!
بازم اگه جایی رو بد گفتم و متوجه نشدید بگید بهتر راهنماییتون کنم!

مثال طبقات ساختمان قشنگ بود .
به این نگاه کن :

<p class="p1">salam</p>
<p class="p2">khoobi</p>
<p class="p3">che khabar</p>

.p1{
float:right;
}
.p2{

}
.p3{

}

طبق گفته شما . p1 ( طبقه دوم ) باید شناور شده باشه رو هوا و p2 ( طبقه هم کف ) میتونه بره بک گراندش قرار بگیره ( زیره p1 ) ( مانند طبقه دوم که بر رویه طبقه اول قرار داده )
اما اینطور نمیشه . چرا ؟
--------------------------------------
حالا به این نگاه کن :

<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>

.d1{
width:100px;
height:100px;
background-color:red;
float:right;

}
.d2{
margin-right:68px;
width:100px;
height:100px;
background-color:green;
}
.d3{
width:100px;
height:100px;
background-color:black;
}

وقتی به d1 خاصیت float:right دادم , شناور شد و اومد طبقه دوم / حالا d2 که طبقه هم کف قرار داره اومده زیرش . مثالشما در تگ های div درست عمل میکنه ولی در تگ های p li به شکل بالا ( مثال اول ) عمل نمیکنه .
علت اینو میخوام بدونم . چرا وقتی به div ها float میدیم , div دومی میره زیرش دقیقه و پنهان میشه / ولی وقتی به p خاصیت float میدیم , p دومی میاد روبه روش و زیره p اولی قرار نمیگیره؟ چرا؟

تشکر

pyramid_ali

سه شنبه 26 خرداد 1394, 22:06 عصر

خوب در مورد تگ p باید بگم که شما کافیه که برای کلاس هایی که تعریف می کنی یه border در نظر بگیری تا بفهمی دقیقا همون چیزی که من گفتم اتفاق میفته! یعنی اونی که خاصیت float داره شناور میشه و ما بقی میان زیر اون قرار میگیرن! ولی خوب برای اینکه نوشته روی هم نوشته نشن و override پیش نیاد خود مرورگر یه مقداری padding برای اون یکی p در نظر میگیره! ولی بازم میگم ناحیه ای که مربوط p شناور میشه روی ناحیه بقیه تگ ها قرار می گیره! می تونی با دادن بک گراند هم متوجه این موضوع بشی! فقط محتوای p ها روی هم نمیان و دلیل این کار رو هم باید از توسعه دهنده بپرسی! البته همین ویژگی ها باعث درست کردن شکلهای قشنگی با css می شه!