CSS Float

The float property in CSS is used for positioning and layout on web pages.

.module {
  float: left;
}

#Values

  • none: the element does not float. This is the initial value.
  • left: floats the element to the left of its container.
  • right: floats the element to the right of its container.
  • inherit: the element inherits the float direction of its parent.
Note: An element that is floated is automatically display: block;

#What Does Float Mean?

To understand the purpose and origin of float, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called “text wrap”. Here is an example of that.

In page layout programs, the boxes that hold the text can be told to honor the text wrap, or to ignore it. Ignoring the text wrap will allow the words to flow right over the image like it wasn’t even there. This is the difference between that image being part of the flow of the page (or not). Web design is very similar.

In web design, page elements with the CSS float property applied to them are just like the images in the print layout where the text flows around them. Floated elements remain a part of the flow of the web page. This is distinctly different than page elements that use absolute positioning. Absolutely positioned page elements are removed from the flow of the webpage, like when the text box in the print layout was told to ignore the page wrap. Absolutely positioned page elements will not affect the position of other elements, and other elements will not affect them, whether they touch each other or not.

#Floats for Layout

Aside from the simple example of wrapping text around images, floats can be used to create entire web layouts.

Floats are also helpful for layout in smaller instances. Take for example this little area of a web page. If we use float for our avatar image, when that image changes size the text in the box will reflow to accommodate it:

This same layout could be accomplished using relative positioning on the container and absolute positioning on the avatar as well. But, when it’s done that way, the text would be unaffected by the avatar, and would not be able to reflow on a size change.

 

#Clearing the Float

Float’s sister property is clear. An element that has the clear property set on it will not move up adjacent to the float like the float desires, but will move itself down past the float. Again an illustration is more helpful than words:

In the above example, the sidebar is floated to the right and is shorter than the main content area. The footer then is required to jump up into that available space as is required by the float. To fix this problem, the footer can be cleared to ensure it stays beneath both floated columns.

#footer {
   clear: both;
}

Clear has four valid values as well. The value both is most commonly used, which clears floats coming from either direction. The values leftand right can be used to only clear the float from one direction respectively. The initial value is none, which is typically unnecessary unless it’s used to explicitly remove a clear value that has been set. The value inherit makes the element inherit its parent’s clear value. Strangely, Internet Explorer did not support this value until IE8.

Clearing only the left or right float, while less commonly seen in the wild, definitely has its uses.

#The Great Collapse

One of the more bewildering things about working with floats is how they can affect the element that contains them (their “parent” element). If a parent element contains nothing but floated elements, its height collapses to nothing. This isn’t always obvious if the parent doesn’t contain any visually noticeable background, but it is important to be aware of.

As counterintuitive as collapsing may seem, the alternative is worse. Consider this scenario:

If the block element on top were to have automatically expanded to accommodate the floated element, we would have an unnatural spacing break in the flow of text between paragraphs, with no practical way of fixing it. If this were the case, we designers would be complaining much harder about this behavior than we do about collapsing.

Collapsing almost always needs to be dealt with to prevent strange layout and cross-browser problems. We fix it by clearing the float after the floated elements in the container but before the close of the container.

#Techniques for Clearing Floats

If you are in a situation where you always know what the succeeding element is going to be, you can apply the clear: both; value to that element and go about your business. This is ideal as it requires no fancy hacks and no additional elements making it perfectly semantic. Of course things don’t typically work out that way and we need to have more float-clearing tools in our toolbox.

  • The Empty Div Method is, quite literally, an empty div.

    . Sometimes you’ll see a <br />element or some other random element used, but div is the most common because it has no browser default styling, doesn’t have any special function, and is unlikely to be generically styled with CSS. This method is scorned by semantic purists since it has no contextual meaning to the page and is there purely for presentation. Of course, in the strictest sense, they are right. But, it gets the job done and doesn’t hurt anybody.

  • The Overflow Method relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats, effectively clearing it for succeeding elements. This method can be beautifully semantic as it may not require an additional elements. However, if you find yourself adding a new div just to apply this, it is equally as un-semantic as the empty div method, and less adaptable. Also bear in mind that the overflow property isn’t specifically for clearing floats. Be careful not to hide content or trigger unwanted scrollbars.
  • The Easy Clearing Method (otherwise known as “clearfix”) uses a clever CSS pseudo selector (:after) to clear floats. Rather than setting the overflow on the parent, you apply an additional class like “clearfix” to it. Then apply this CSS:
    .clearfix:after { 
      content: "";
      visibility: hidden;
      display: block;
      height: 0;
      clear: both;
    }

    This will apply a small bit of content, hidden from view, after the parent element which clears the float. This isn’t quite the whole story, as additional code needs to be used to accomodate for older browsers.

Different scenarios call for different float clearing methods. Take for example a grid of blocks, each of different types.

To better visually connect the similar blocks, we want to start a new row as we please, in this case when the color changes. We could use either the overflow or easy clearing method if each of the color groups had a parent element. Or, we use the empty div method in between each group. Three wrapping divs that didn’t previously exist or three after divs that didn’t previously exist. I’ll let you decide which is better.

#Problems with Floats

Floats often get beat on for being fragile. The majority of this fragility came from bugs in IE6 and IE7. As those browsers fade into the past, these bugs are fading along with them. But, it’s still worth understanding them if you ever need to debug an “OldIE”.

  • Pushdown is a symptom of an element inside a floated item beingwider than the float itself (typically an image). Most browsers will render the image outside the float, but not have the part sticking out affect other layout. Old versions of IE expanded the float to contain the image, often drastically affecting layout. A common example is an image sticking out of the main content push the sidebar down below.

    Quick fix: Make sure you don’t have any images that do this, useoverflow: hidden; to cut off excess.

  • Double Margin Bug — Another thing to remember when dealing with IE 6 is that if you apply a margin in the same direction as the float, it will double the margin. Quick fix: set display: inline on the float, and don’t worry it will remain a block-level element.
  • The 3px Jog is when text that is up next to a floated element is mysteriously kicked away by 3px like a weird forcefield around the float. Quick fix: set a width or height on the affected text.
  • In IE 7, the Bottom Margin Bug was when if a floated parent has floated children inside it, bottom margin on those children is ignored by the parent. Quick fix: using bottom padding on the parent instead.

float თვისება სიესესში გამოიყენება ვერ ბგვერდების სასურველი პოზიციენირებისა და განლაგების მისაღწევად.

.module {
  float: left;
}

#მნიშვნელობები

  • none: ელემენტი არ ტივტივებს – ეს არის პირველადი მნიშვნელობა.
  • left: ელემენტი ტივტივებს მისი მომცველი კონტეინერის უკიდურეს მარხენა მხარეს.
  • right: ელემენტი ტივტივებს მისი მომცველი კონტეინერის უკიდურეს მარჯვენა მხარეს.
  • inherit: ელემენტი იღებს მისი მშობელი ელემენტის float თვისებებს.
შენიშვნა: ელემენტი რომელიც განიცდის float-ის ზემოქმედებას ავტომატურად არის:display: block;

#რას ნიშნავს float?

იმისათვის, რომ გავიგოთ ამ თვისების დანიშნულება, გავეცნოთ მის წარმომავლობას. გადავხედოთ ბეჭდვის დიზაინს. ბეჭდვისას ვხედავთ, რომ გვერზე როდესაც განლაგებულია სურათები, ტექსტი თითქოს გარშემო შემოერტყმება მათ. მაგალითისთვის:

ვებ გვერდების დაგეგმვისას, ყუთებს, რომელიც მოიცავენ ტექსტებს შეგვიძლია ვუთხრათ, რომ გითვალისწინონ შემორტყმის ძველებური თვისება, ან პირიქით. ამ ნაბიჯის არ გათვალისწინების შემთხვევაში, ტექსტს საშუალება აქვს გადაეწეროს სურათს ისე, თითქოს იგი არც ყოფილიყო გვერდზე. ეს ფაქტორი დამოკიდებულია იმაზე, მოიაზრება თუ არა სურათი გვერდის ნაწილად.

ვებ დიზაინში, გვერდის ელემენტები float თვისებით არიან ზუსტად სურათებივით ნაბეჭდ ვიზუალში, რომელთაც ტექსტი გარს ერტყმის. მოტივტივე ელემენტები რჩებიან გვერდის შემადგენელ ნაწილაბედ, ეს არის მკვეთრი განსხვავება აბსოლუტური პოზიციენირების გმაოყენებისგან. ამ შემთხვევაში პოზიციონირებული ელემენტი აღარ აღიქმება გვერდის ნაწილად და ამოვარდება მისი შემადგენლობიდან. აბსოლუტურად პოზიციონირებული ელემენტები არ იქონიებენ გავლენას სხვა ელემენტებზე, ისევე როგორც სხვა ელემენტები არ იქონიებენ გავლენას მათზე, მიუხედავად იმისა, ეხებიან ისინი ერთმანეთს, თუ არა.

#Float მთელ გვერდის განლაგებისთვის.

გარდა ტექსტის სურათების გარშემო შემორტყმისა, float თვისება შეიძლება გამოყენებული იქნას მთელი გვერდის განლაგების შექმნისას.

Float შეიძლება ასევე გამოვიყენოთ მცირე არეის სასურველი განლაგების მისაღწევა. მაგალითისთვის ავიღოთ ეს მცირე ზომის მონაკვეთი. თუ ჩვენ გამოვიყენებთ Float-ს ავატარის სურათისთვის, როდესაც სურათი შეიცვლის ზომას, ტექსტი მის შესაბამისად შეიცვლის განლაგებას.

იგივე განლაგების მიღწევა შესაძლებელი არის რელატიური პოზიციონირების გამოყენებისას კონტეინერზე და აბსოლუტური პოზიციონირების გამოყენებისას ავატარზე. თუმცა ამ შემთხვევაში, სურათს ტექსტზე გავლენა არ აქვს, რაც ნიშნავს იმას რომ ის არ შეიცვლის მდებარეობას გვერდის ზომების ცვლილებისას.

#Float-ის გაწმენდა

Float-ს მეზობელი თვისება არის  clear. ელემენტი, რომელზეც მოქმედებს clear თვისება, არ იმოძრავებს ახლომდებარე Float თვისების მქონე ელემენტის მოთხოვნის მიხედვით. ილუსტრაცია მეტად თვალსაჩინოდ წარმოაჩენს აღნიშნულს.

მოცემულ მაგალითსი, გვერდითა ყუთი ტივიტვებს მარჯვნივ, და უფრო მცირე ზომისაა ვიდრე მთავარი შინაარსის მომცველი არეა, ფუტერი, რომელიც ხტება ზემოთ და იავებს დარჩენილ სივრეს, იქცევა ასე იმის გამო, რომ მასზე მოქედებს მის მეზობალდ მდებარე ელემენტების  Float თვისება. ამ პრობლემის გადასაჭრელად, ფუტერი შეიძლება “გაიწმინდოს” რათა დარჩეს ორივე მოტივტივე ელემენტის ქვემოთ.

#footer {
   clear: both;
}

Clear-ს ასევე გააჩნია 4 მნიშვნელობა. მნიშვნელობა both ყველაზე ხშირა გამოყენებადია, რომელიც ყველა მიმართულებით ბლოკავს Float-ის გავლენას.მნიშვნელობები leftright  გამოიყენება მხოლოდ 1 მიმართულებით დასაბლოკად. პირველად მნიშვნელობა არის  none, რომელიც როგორც წესი არაა საჭირო, თუ არ გამოიყენება განსაზღვრული  clear თვისების მოსაშლელად. მნიშვნელობა inherit აიძილებს ელემენტს მიიღოს მისი მშობლისclear მნიშვნელობა.

მხოლოდ left ან right float-ს გაწმენად, მიუხედავად იმისა რო ზოგადად არაა თვალსაჩინო, შესაძლოა გააჩნდეას გამოყენება.

#დიდი ნგრევა

ერთ-ერთი ყველაზე შემაცბუნებელი რამ, რასაც სეიძლება გადავეყაროთ float ელემენტებთან მუშაობისას არის ის, თუ როგორ შეუძიათ მათ, მშობელ ელემენტებზე ზემოქმედება. თუ მშობელი ელემენტი არ მოიცავს სხვა არაფერს, გარდა float თვისების მქონე ელემენტისა. მისი სიმაღლე დადის ნულამდე. ეს ყოველთვის არაა თვალსაჩინო, თუ მშობელს არ აქვს ვიზუალურად შესამჩნევი ფონი, თუმცა აუცილებელია ამის შესახებ ცოდნა.

როგორი პარადოქსულიც არ უნდა მოგეჩვენოთ ზემოთ აღნიშნულიმ მისი ალტერნატივა უარესია. წარმოიდგინეთ შემდეგი სცენარი:

თუ block ავტომატურად შეიცვლიდნენ ზომას რათა მორგებოდნენ float თვისების მქონე ელემენტებს, დარჩებოდა გაურკვეველი მანძილები პარაგრაფს შორის, თან არ იარსებება რაიმე პრაქტიკული გზა ამის გამოსასწორებლად.

მშობელი ელემენტის სიმაღლის დაკარგვის პრობლემას კი ვუმკლავდებით float თვისების მქონე ელემენტებე clear თვისების გამოყენებით, თუმცა მშობელი ელემენტის დახურვამდე.

#float თვისების მქონე ელემენტების “გაწმენდის” ხერხები

თუ იმყოფებით სიტუაციაში, სადაც ზუსტად იცით რა იქნება მომდევნო ელემენტი, შეგიძლია გამოიყენოთ  clear: both; . ეს იდეალურია, რადგან არ მოითხოვს რთულ სამუშაოს და დამატებით ელემეტებს. რა თქმა უნდა ყველაფერი ასე ტიპიურა არ წყდება და ჩვენ გვჭირდება დამატებითი ხელსაწყოები.

  • ცარიელი დივის მეთოდი ეს არის, პირდაპირი მნიშვნელობით, ცარიელი დივი. 

    . ზოგჯერ თქვენ ნახავთ <br />ელემენტს, ანსხვა რომელიმე ელემენს, თუმცა დივი არის ყველაზე ხშირად გამოყენებადი, რადგან მას არ აქვს ბრაუზერისგან თანდაყოლილი სტილები, არ აქვს რაიმე სპეცილური ფუნქცია, და ნაკლებად სავარაუდოა, რომ იყოს სეისესით ზოგადად გასტილული. ეს მეთოდი სძულთ სემანტიკურ პურისტებს, რამეთუ მას არ გააჩნი აკონტექსტუალური მნიშვნელობა გვერიდსთვის და არის მხოლოდ და მხოლოდ პრეზენტაციისთვის. რა თქმა უნდა, თუ საკითხს მკაცრა მივუდგებით, ისინი მართლები არიან, თუმცა ეს მეთოდი საქმეს ასრულებს და არავის არ ვნებს ამავდროულად.

  • The Overflow Method მდგომარეობს overflow თვისების გაწერაში მშობელი ელემენტისთვის. თუ ეს თვისება უტოელდება auto ან hidden მშობელი ელემენტი ფართოვება, რათა მოიცვას მოტივტივე ელემენტები, და ამავდროულად იწმინდება მათი გავლენისგან. ეს მეთოდი საკმაოდ სემანტიკურად მისაღებია, რადგან არ მოითჰოვს დამატებით ელემენტებს. თუმცა თუ აღმოაჩენთ, რომ ახალ დივს, მხოლოდ ამ მეთოდის გამოტენებისთვის ამატებთ, სეთივე შემთხვევასთან გვექნება საქმე, როგორცაა ცარიელი დივის მეთოდი. ასევე გაითვალისწინეთ, რომ  overflow თვისება არაა სპეციფიურად მოტივტივე ელემენტების გაწმენდისთვის განკუთვნილი, და ფრთხილად უნდა იყოს არ დაკარგოთ კონტენტი ან არ მიიღოთ არასაჭირო სქროლბარი.
  • მარტივი წმენდის მეთოდი(ასევე ცნობილი როგორც “clearfix”) ჭკვიანურა იყენებს CSS ფსევდო ელემენენტს (:after). იმის ნაცვლად რომ overflow განვუსაზღვროთ მშობელ ელემენტს, თქვენ ანიჭებთ მას დამატებით კლასს და შემდეგ კი ასეთ მნიშვნელობებს:
    .clearfix:after { 
      content: "";
      visibility: hidden;
      display: block;
      height: 0;
      clear: both;
    }

    ეს მეთოდი დაამატებს კონტენტის მცირე მონაკვეთს, ომელიც არაა ხილული და წმენდს ყველა მანამდე განთავსებული მოტივტივე ელემენტისგან წარმოშობილ გავლენას. ეს არაა რეალურად მთელი ისტორია, რადგან დამატებით კოდია საჭირო, რათა მოვიცვათ ყველა ბრაუზერი.

სხვადასხვა შემთხვევები, სხბადასხვა მეთოდებს იყენებენ. მაგალითისთვის წარმოდიგინეთ ბლოკებისგან შემდგარი ბადე, რომელთაც განსხვავებული Float თვისებები აქვთ.

უკეთესი ვიზუალუზაციისთვის შეაერთეთ მსგავსი ბლოკები, წარმოიდგინეთ, რომ გვსურს დავიწყოთ ახალი მწკრივი, როდესაც ჩვენ მოგვინდება, ამ შემთხვევაში მაშინ, როცა ახალი ფერის ბლოკები გვხვება. შეგვიძლია გამოვიყენოთ როგორც overflow ასევე მარტივი წმენდის მეთოდი, თუ თიოთოეული ფერის ჯგუფებს ყავთ, მშობელი ელემენტი, ან ცარიელი დივის მეთოდის ყოველი მწკრივის ქვემოთ.

#Float თან დაკავშირებული პრობლემები

Float ხშირად იღებს კრიტიკას მისი არამყარობის გამო. ამ არამყარობის მთავარი გამომწვევი მიზეზია  IE6 და  IE7 ის გაუმართაობა. თუმცა, რადგან ეს ბრაუზერები წარუსლს ბარდება, აღნიშული პრობლემებიც მათთან ერთად გაუჩინარდება. მაგრამ მაინც საჭიროა გვესმოდეს ისინი, თუ ოდესმე დაგჭირდებათ აღნიშნულ პრობლემებთან გამკლავება.

  • ქვემოთ ჩამოვარდნა  წარმოადგენს ისეტი ელემენტის სიმპტომს, რომელიც განლაგებულია მოტივტივე ელემენტში და მასზე განიერია (ძირითადად სურათი). ბრაუზერების უმეტესობა განალაგებს სურათის ნაწილს მოტივიტვე ელემენტის გარეთ, თუმცა არ იქონიებს გავლენას დანარჩენ ელემენტებზე. ინტერნეტ ექსპლორერის ძველი ვერსიები გამოიწვევენ მოტივტივე ელემენტის გაფართოებას, რათ მოიცვას მასში მდებარე, ზომით დიდი ელემენტი და ხშირად გამოიწვევენ დანარჩენ განლაგებაზე მკვეთრ გავლენას.

    სწრაფი გადაწყვეტა: დარწმუნდით, რომ არ გაქვთ გერდზე მსგავსი სურათები, გამოიყენეთoverflow: hidden;

  • ორმაგი ზღვრის პრობლემა — კიდევ ერთი, რაც უნდა გვახსოვდეს IE 6 თან მუშაობისას არის ის, რომ თუ თქვენ მიანიჭებთ ზღვარს (margin) იმ მხარეს, საითაც მინიჭებულია Float ეს ზღვარი გაორმაგდება  სწრაფი გადაწყვეტა: განსაზღვრეთ display: inline მოტვიტვე ელემენტზე.
  • 3 პიქსელით აცდენა: ესაა შემთხვევა, როდესაც ტექსტი, რომელიც მსდევს მოტვიტივე ელემენტს, 3 პიქსელით იწევს. სწრაფი გადაწყვეტა: მიანიჭეთ სიმაღლე ან სიგანე აღნიშნულ ტექსტს.
  • IE 7, ქვედა ზღვრის პრობლემა – თუ მოტვიტივე მშობელი მოიცავს მოტივტივე შვილ ელემენტებს, მშობელი უგუნებელყოფს შვილობილი ელემენტის ქვედა ზღვარს. სწრაფი გადაწყვეტა: მიანიჭედ ქვედა შიდა ზღვარი (padding) მშობელ ელემენტს.

წყარო: Css-tricks

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s