Over the years, there have been numerous articles published online that discuss common bugs in connection with floats in CSS layouts. All of these, not surprisingly, deal with problems specific to Internet Explorer. For example, the CSS property "margin-left" becomes marginLeft ; the property background-color becomes backgroundColor , and so on. So, the following would be incorrect:.
Floats can be used to resolve a number of design challenges in CSS layouts. Some examples are discussed here. Roger Johansson of Berea Street outlines an 8-step tutorial to create a simple, cross-browser, 2-column, horizontally centered layout. The float property is integral to the chemistry of this layout. Petr Stanicek of pixy. Similar to what we discussed earlier under "Float in Practice", Max Design describes how to float an image with a caption, allowing text to wrap around it naturally.
The float property is a key ingredient in coding sprite-based horizontal navigation bars. To demonstrate the importance of the float property in this example, here is a screen shot of the same image after using firebug to remove the float: left :.
A simple use for the float property is to left-float a series of photos contained in an unordered list, which gets the same result as what you would see in a table-based layout.
This works better than a table-based grid, because the number of photos in the gallery can change and the layout would not be affected. Default styling on form elements across different browsers can be a pain to deal with.
Here is a simple search form, with an image used for the submit button:. In every browser, the result is the same: The button appears slightly higher than the input field. Changing margins and padding does nothing. The simple way to fix this is to float the input field left, and add a small right margin. Here is the result:. As was mentioned at the outset, without the CSS float property, table-less layouts would be, at worst, impossible, and, at best, unmaintainable.
Floats will continue to be prominent in CSS layouts, even as CSS3 begins to gain prominence — even though there have been a few discussions about layouts without the use of floats. Hopefully this discussion has simplified some of the mysteries related to floats, and provided some practical solutions to a number of issues faced by CSS developers today. Just the things you can actually use.
Everything TypeScript, with code walkthroughs and examples. And other printed books. Email Newsletter Your smashing email. Smashing Online Workshops: interactive and live. Learn more about the challenge. More after jump! Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
That means floated elements will affect the position of other elements and vice versa. Absolutely positioned elements, on the other hand, will not affect the position of other elements nor will other elements affect their position.
So the syntax would look something like:. Creating space around the floated elements can help improve the appearance of the layout. You can use a type selector to target the image and define it with the rule float: left or float: right. That tells the browser two things. The first is that the image floats to the right in the paragraph. The second is that the text in the paragraph wraps around the image. Notice that the CSS includes a type selector to target the image, which is contained in the paragraph.
Compare how the image appears on the page below when the float property is not applied. You can use a class selector to target the button class and define it with the rule float: left or float: right.
That makes the button float to the left in the paragraph and makes the text in the paragraph wrap around the button. Margin settings have also been added to add some space between the text and the button. This makes it easier to read and more visually appealing. Notice that the CSS includes a class selector to target the button defined by the button class. The button will only go as far to the left as the image and its margin settings allow.
Take a look below. In this example, the CSS float property is defined by the left value. While useful, the float property can cause layout issues. When this happens, the floated element will extend beyond the bounds of its containing element and disrupt other parts of your page. Issues like this can be fixed using the clear property in CSS. This property lets you "clear" floated elements from the left side, right side, or both sides of an element.
Then, you need to match the clear to the float. So if the element is floated to the right, then the following element should be cleared to the right. That way, the floated element will float to the right and the cleared element will appear below it.
Consider this example — notice that div 2 comes after div 1 in the HTML. If you have ever come across the problems of vanishing nearby elements or floats that poke out like a sore thumb, worry no more. When an element is tagged "float" it runs to either the left or the right basically until it hits the wall of its container element.
Alternatively, it will run until it hits another floating element that has already hit the same wall. Here are two more things that happen to a floating element depending on what type of element is being kept floating:.
What you should really be thinking about is how the siblings after it are going to behave. The block elements will go a step further and will wrap themselves around a "Float" generously, even if it means kicking out their own child elements to make space for the "Float". Below are a blue box and after it is a red box of the same size with some child elements.
Everything will be fine once the red box stops embracing the blue box and for that you can use overflow:hidden. See below how the red box behaves with overflow:hidden.
0コメント