مشکل در CSS

[saeedtrb]

سلام دوستان خیلی وقت درگیر این مشکلم ولی با چندتا راه حلش کردم ولی از اونجا که می خوام درک درستی از CSS داشته باشم می خوام بدونم چرا این اتفاق میوفته:
کد زیر نگاه کنید

<div id="home_content">
<div id="home_about">
</div>
</div>
اینم css
#home_about {
width: 320px;
float: right;
background: #CCC;
height: 258px;
}
#home_content {
padding: 10px;
overflow: hidden;
background: #FF0505;
}
تا اینجا هاdiv مشکل ندارن ام اگه overflow: hidden; #home_content برداریم می بینیم که دیگه تگ #home_content وجود نداره یعنی همون حجم نداره حالا اگه به همین #home_content float: right; اضافه کنیم به اندازه #home_about میشه. یعنی برای اینکه عناصر داخل صفحه حجم داشته باشن حتماً باید یا شناورشون کرد یا ...
ممنون میشم اگه راهنمایی کنید

[Omid Jackson]

نه overflow میخواد نه float
شما به عنصر فرزند ارتفاع دادین و عنصر پدر هم padding
حالا عنصر پدر فرزنداش تا هرچه قدر بخوان گسترشش میدن و با اون اندازه padding که دادین فاصله رو از کناره ها بافرزندا حفظ میکنه یعنی ارتفاعش رو با فرزنداش تنظیم میکنه و فاصله ای که گفتین رو حفظ میکنه باهاش
عنصر پدر مثل شکم میمونه و عنصر فرزند هم مثل غذا، شما هرچقدر غذا بخورین شکمتون به اون اندازه بزرگ میشه، دقیقا مثل همین کار بالا
این هم برای گفته ها (http://jsfiddle.net/OmidJackson/F7pqQ/)

[Omid Jackson]

http://www.w3.org/TR/CSS21/visuren.html#block-formatting
http://amib.ir/weblog/?p=811
اینا رو مطالعه کنین که اگر برای فرزند float تعریف کنین و برای پدر overflow تعریف نکنین چرا اندازه مشخص نمیگیره

[saeedtrb]

شما همین امتحان کنید حجمشو از دست میده رمانی که overflow or float نداشته باشه

[saeedtrb]

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

[Omid Jackson]

اگر float باشه ولی overflow نباشه بله اون شکلی میشه اما اگر float نباشه ولی overflow باشه فرقی نمیکنه
ولی اگر CSS به شکل زیر تغییر پیدا کنه اونوقت قسمتی که بیرون باشه نشون داده نمیشه، میشه گفت حالت ماسک ایجاد میکنه


#home_about {
width: 320px;
background: #CCC;
height: 258px;
}
#home_content {
padding: 10px;
height: 208px;
overflow: hidden;
background: #FF0505;
}

دلیل جمله اول رو تو هردو لینک بالا نوشتن
این دلیل فارسیش (http://amib.ir/weblog/?p=811)

[saeedtrb]

پس عناصر دایو در حالت معمولی bfc نیستند. چرا عناصر دارای float بر حجم پدرشون تاثیر ندارن و آیا مثل حالت position: absolute; حساب میشن؟؟؟