پراپرتی float مشخص میکند که یک المان به چه صورتی در صفحه شناور شود.

پراپرتی clear مشخص میکند کدام المان ها میتوانند قبل از المانی که این پراپرتی را دارد شناور شوند. همچنین ان پراپرتی تعیین میکند که آن المان ها در کدام سمت میتوانند شناور شوند.

پراپرتی float

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

پراپرتی float یکی از مهمترین پراپرتی های سی اس اس برای چینش لی اوت صفحات وب میباشد.

پراپرتی float میتواند یکی از مقادیر زیر را داشته باشد.

• left - المان به سمت چپ container خود شناور میشود.
• right - المان به سمت راست container خود شناور میشود.
• none - المان شناور نمیشود (همان جایی که واقعا هست قرار میگیرد). مقدار پیش فرض میباشد.
• inherit - المان مقدار پراپرتی را از المان بالایی خود به ارث میبرد.

یکی از رایج ترین استفاده از پراپرتی float شناور کردن متن دور تصویر میباشد.

مثال - float: right;

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

 
img {
    float: right;
}
 

مثال - float: left;

مثال زیر مشخص میکند که تصویر باید سمت چپ متن شناور شود:

 
img {
    float: left;
}
 

مثال - float: none;

در مثال زیر تصویر در جایی که واقعا قرار دارد نمایش داده میشود.

 
img {
    float: none;
}
 

پراپرتی clear

پراپرتی clear مشخص میکند کدام المان ها میتوانند قبل از المانی که این پراپرتی را دارد شناور شوند. همچنین ان پراپرتی تعیین میکند که آن المان ها در کدام سمت میتوانند شناور شوند.

پراپرتی clear میتواند یکی از مقادیر زیر را داشته باشد.

• none - اجازه میدهد المان ها در هر دو سمت شناور شوند. مقدار پیش فرض
• left - اجازه نمیدهد المان ها سمت چپ شناور شوند
• right - اجازه نمیدهد المان ها سمت راست شناور شوند
• both - اجازه نمیدهد المان ها در هیچ سمتی شناور شوند
• inherit - المان مقدار پراپرتی را از المان بالایی خود به ارث میبرد.

زمانی از پراپرتی clear استفاده میکنید که پراپرتی float را به یک المان داده باشید.

زمانی که از پراپرتی float استفاده میکنید پراپرتی clear باید با آن هماهنگ باشد. برای مثال زمانی که شما یک المان را به سمت چپ شناور میکنید، باید clear را به سمت چپ بدهید. با این کار المان شما همچنان شناور باقی میماند اما المانی که clear شده باشد پایین المان شناور شده قرار میگیرند.

مثال زیر المان سمت چپ شناور شده و clear هم سمت چپ است:

مثال بدون clear

 
.div1 {
    float: left;
    width: 100px;
    height: 50px;
    margin: 10px;
    border: 3px solid #73AD21;
}
.div2 {
    border: 1px solid red;
}
 

مثال با clear

.div3 {
    float: left;
    width: 100px;
    height: 50px;
    margin: 10px;
    border: 3px solid #73AD21;
}
.div4 {
    border: 1px solid red;
    clear: left;
}
 

The clearfix Hack

اگر المانی که شناور میشود بلندتر از container خود باشد، از container خود خارج میشود.

بدون clearfix

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

با clearfix

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

برای جلوگیری از این اتفاق میتوانیم به المان container overflow: auto; بدهیم.

 
.clearfix {
    overflow: auto;
}
 

تا زمانی که قادر باشید margin و padding را کنترل کنید هک overflow: auto; بخوبی کار خواهد کرد. اما اگر نتوانید آنها را کنترل کنید اسکرول بار نمایش داده خواهد شد.

اما هک جدید و مدرن بسیار امن تر از هک قدیمی میباشد. کدهای آن بصورت زیر است:

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

قرار دادن تصاویر کنار همدیگر

با کمک پراپرتی float، شما به راحتی میتوانید تصاویر را کنار همدگیر فرار دهید.

 
.img-container {
    float: right;
    width: 33.33%; /* three containers (use 25% for four, 
and 50% for two, etc) */
    padding: 15px; /* if you want space between the images */
}
 

Navigation Menu

برای ایجاد منو از پراپرتی float و یک لیستی از لینک استفاده کنید.

 
<ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li<
</ul>
 

 
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
li {
    float: left;
}
li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover {
    background-color: #111;
}
.active {
    background-color: red;
}
 

Web Layout

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

 
<body>
<div class="header>
    <h1>Chania</h1>
<div>
<div class="clearfix">
    <div class="column menu">
        <ul>
            <li>The Flight</li>
            <li>The City</li>
            <li>The Island</li>
            <li>The Food</li>
        </ul>
    </div>
    <div class="column content">
        <h2>The City</h2>
        <p>Chania is the capital of the Chania region on the island of 
Crete. The city can be divided in two parts, 
the old town and the modern city.</p>
        <p>You will learn more about web layout and responsive
 web pages in a later chapter.</p>
    </div>
</div>
<div class="footer">
    <p>Footer Text</p>
</div>
</body>
 

 
* {
 box-sizing: border-box;
}
.header, .footer {
 background-color: grey;
 color: white;
 padding: 15px;
}
.column {
 float: left;
 padding: 15px;
}
.clearfix::after {
 content: "";
 clear: both;
 display: table;
}
.menu {
 width: 25%;
}
.content {
 width: 75%;
}
.menu ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
}
.menu li {
 padding: 8px;
 margin-bottom: 8px;
 background-color: #33b5e5;
 color: #ffffff;
}
.menu li:hover {
 background-color: #0099cc;
}