Computing dimensions : With flows linked, the dimensions of each box—width, height, margins, borders, and paddings—and its position on the page can be computed. Roughly speaking, we think of the browser as traversing flow trees from the top down, computing horizontal attributes along the way, then computing vertical attributes from the bottom up, and finally doing an in-order pass to compute positions.
The asymmetry between width and height is because we need the width to know how to break lines of text, and we need to know how the lines of text broke to compute the height. The simple down-up picture is not quite correct. It is ruined by concepts like the shrink-to-fit width.
However, it is a handy guide. Since dimensions are computed using an top-down and bottom-up traversal of flow trees, a box's height generally shouldn't depend on the height of its parent, and its width generally shouldn't depend on the width of its children.
Predictably, both concepts create referential loops. For example, a box might have a percentage height, so it is dependent on its parent's height, but that parent needs the child's height to compute its own height. Drawing rectangles : Once every box's position and dimensions are known, it can be turned into a collection of rectangles, which are then drawn, in an order defined by the boxes' z-index property.
The result is a picture that is shown to the user. Floats fit into the picture I just sketched in a few ways. First, we must discuss how they are linked into flows. Then, we must discuss how their dimensions are computed. Finally, we must discuss how they are positioned.
All boxes that float are flow roots. They leave the flow they would have been in had they not floated, and instead form their own, independent flow for their children. This means that a float's dimensions can be computed independently of its surroundings.
The dimensions of a float are mostly computed just like the dimensions of any other box, with a few twists:. I won't be describing margin collapsing, shrink-to-fit, or auto heights here. I would recommend setting a fixed width for floats, to avoid having to think about shrink-to-fit calculations, though shrink-to-fit is usually unsurprising. The way heights and margins are computed for floating boxes tends to be unsurprising as well.
The rules of floats are laid out in CSS 2. In this section, I will introduce the idea of an exclusion zone , which is a simple model for answering all of these complex questions. Let's start with what happens when there is only one float in a document, and nothing exceptional occurs. For example, consider the layout in the first picture here:. Sorry, your browser does not support SVG. In this picture and every future one where every box is drawn in black, I am drawing the final rendered result of a web page.
Every rectangle corresponds to a box; line boxes are the ones with squiggles inside, and block boxes are the others. Every box is drawn at a slight offset to make the rendering easier to understand. In a real rendering, for example, a line box's bottom edge would be identical with the top edge of the next line box. Let's look at how the big box, a left float, is positioned.
The state of things when we're positioning it is shown in the second image above. I've drawn that y -position with a red line, which I call the high-water mark. The left float is placed so that its left edge is the left edge of its parent. In general, left and right floats behave totally symmetrically, so I will only discuss left floats here. In this and the other pictures in this document, the red line is the high-water mark, the blue boxes are block boxes, and the green boxes are line boxes.
The box we are currently positioning is drawn dashed, while boxes not yet positioned aren't drawn at all, the browser doesn't yet know where they go. As the browser positions boxes, it must keep track of the high-water mark, both to position floats and also to position boxes in normal flow.
As soon as we have more than one float, this picture becomes more complicated. 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. 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. Join in and boost your skills online.
Design Management Masterclass. 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. A floating element is one where the computed value of float is not none. As float implies the use of the block layout, it modifies the computed value of the display values, in some cases:.
The float property is specified as a single keyword, chosen from the list of values below. The element must float on the start side of its containing block. That is the left side with ltr scripts, and the right side with rtl scripts.
The element must float on the end side of its containing block. That is the right side with ltr scripts, and the left side with rtl scripts.
0コメント