Recomendados
Mais conteúdo relacionado
Semelhante a 1 07-2-css floats-and_positioning
Semelhante a 1 07-2-css floats-and_positioning (20)
Mais de apnwebdev
Mais de apnwebdev (11)
Último
Último (20)
1 07-2-css floats-and_positioning
- 1. CSS Floats & Positioning Colin Gourlay & Kevin Vanderbeken
- 2. Today: Floating Elements Clearing Floated Elements
- 3. introduction
- 5. block elements <div>, <p>, etc. I’m text inside a block element So am I. I’m in a block element too!
- 6. inline elements <span>, <a>, etc. I’m text inside an inline element So am I. I’m in an inline element too!
- 7. block and inline elements support the box model in different ways
- 9. Margins are only possible on the left and right, not top and bottom.
- 11. When the window or containing element is resized, block elements expand or contract to the new width. block element block element block element block element block element block element
- 12. When the window or containing element is resized, inline elements reflow to fit. inline element inline inline element element inline element inline element inline element
- 13. elements don’t overlap or bunch up, they make room for one another
- 14. floated elements a.k.a ‘floats’
- 15. floats can be used to create: multi-column layouts navigation toolbars table-like alignment (without tables) and much, much moreTM
- 16. float: left; float: right; float: none;
- 17. things you should know about floated elements
- 18. a floated element is like an island in a stream I’m a block element that is beside an image that has been floated to the right. My contents will wrap around the image.
- 19. floats stay in the content area of the containing element this isn’t possible
- 20. margins are maintained img{ float: right; margin-left: 5px; margin-right: 5px; } I’m a block element that is beside an image that has been floated to the right. My contents will wrap around the image.
- 21. always provide a width for floated elements p.floatRight{ float: right; margin: 5px; width: 120px; } I’m a block element that is beside an paragraph that has been floated to the right. My contents I’m a paragraph element, floated to the right, with a defined width will wrap around the paragraph.
- 22. floated inline elements behave as block elements
- 23. elements do not float higher than their reference in the source
- 24. you can float multiple elements Because I am beside two floated elements (one left, one right), I wrap around both of them.
- 25. there is one noticeable side effect of using floats...
- 27. what we actually want to see is this...
- 29. to achieve this effect, we need to make use of clearing
- 31. clear: left; clear: right; clear: both;
- 32. clear: left; The left value starts the element below any elements that have been floated to the left
- 33. clear: right; Similarly, the right value makes the element clear all floats on the right edge of the containing block
- 34. clear: both; If there are multiple floated elements, and you want to be sure an element starts below all of them, use the both value to clear floats on both sides
- 35. My position is governed by the floated elements to the left. I have not been cleared in any way. I have been cleared, so I start below the floated elements.
- 36. next week...
- 37. CSS Positioning & CSS Grid Systems
Notas do Editor
- We've shown you how boxes have layers that define how they are rendered and how they hold their contents.In there we also show how the properties of CSS that relate to the box model can define rules for how elements play together in the document.From there, we need to know how elements with those properties can use flow and positioning to work in page layouts and with mixed content.
- We've covered it only lightly, but here we find out that elements are made up of two different kinds of box model sets. Block and Inline.
- Block elements will expand across the available width (unless constraints are placed on them) and clear any following content below them down the page. <div> and <p> elements are examples of these.
- Inline elements will sit within the flow of text or elements horisontally as well as vertically. They will by default, only take up width and height of their contents. <span> and <a> elements are examples of these.
- Since we introduced the box model last lesson it's important to know that our example was based around a block kind of element. Things change for inline elements, as they don't support the same kind of box model properties due to their nature:
- The Width property wont do anything on inlines since they are defined by their content and run inline with other content.Margins are only possible on the left and right, not top and bottom....and other things left to your experimentation :-)
- In the CSS layout model, text elements are laid out from top to bottom in the order in which they appear in the source, and from left to right (in left-to-right reading languages).Block elements stack up on top of one another and fill the available width of the browser window or other containing element.Inline elements and text characters line up next to one another to fill the block elements.
- When the window or containing element is resized, the block elements expand or contract to the new width.
- When the window or containing element is resized, the inline content reflows to fit.
- Objects in the normal flow affect the layout of the objects around them. This is what we've been showing you with the box model examples and what you know from seeing websites in your own experience - elements don’t overlap or bunch up, they make room for one another.Now we start paying attention to whether elements are in the flow or removed from the flow. Floating and positioning changes the relationship of elements to the normal flow in different ways.
- The float property moves an element as far as possible to the left or right, allowing the following content to wrap around it. It's not a positioning scheme, but a unique feature built into CSS.
- The float property moves an element as far as possible to the left or right, allowing the following content to wrap around it. It's not a positioning scheme, but a unique feature built into CSS.Floats are one of the primary tools of modern CSS-based web design, used to create multi-column layouts, navigation toolbars from list elements, and table-like alignment without tables.
- Floated elements continue to influence the surrounding content.Eg. If some paragraph text is near a floated element it reflows to make room for it.One popular analogy compares floats to islands in a stream - they are not in the flow, but the stream has to flow around them.
- It is also important to note that the floated element is placed within the content area (the inner edges) of the element that contains it.It does not extend into the padding area of the paragraph.
- The margin is held on all sides of the floated image. The entire element box, from outer edge to outer edge, is floated.
- It is necessary to specify a width for floated text elements because without one, the content area of the box expands to its widest possible width (or, on some browsers, it may collapse to its narrowest possible width).Images have an inherent width, so we don't need to specify a width (although we can).Basically, If you do not provide a width value, inside the browser the width of the floated block will be set to auto, which fills the available width of the browser window or other containing element.There’s not much sense in having a full-width floated box since the idea is to wrap text or elements next to the float, not start below it!
- The margin is held on all four sides of floated elements, even though top and bottom margins are usually not rendered on inline elements.This is because all floated elements behave like block elements.Once you float an inline element, it follows the display rules for block-level elements, and margins are rendered on all four sides.Margins on floated elements do not collapse (overlap) as normal though! So be aware!
- A floated block will float to the left or right relative to where it occurs in the XHTML source code allowing the following elements in the flow to wrap around it.It will stay below any block elements that come before it in the flow (in effect, it is “blocked” by them).That means you can’t float an element up to the top corner of a page, even if its nearest ancestor is the body element.If you want a floated element to start at the top of the page, it must appear first in the document's source code.
- It’s perfectly fine to float multiple elements on a page or even within a single element.When you float multiple elements, there is a complex system of behind-the-scenes rendering rules that ensure floated elements do not overlap.Floated elements will be placed as far left or right (as specified) and as high up as space allows.When a series of sequential paragraphs are floated to the same side (left), the first floats start stacking up from the left edge, but when there isn't enough room for the last one, it moves down and to the left when it bumps into something; e.g. the edge of the browser window.
- A floating image obscures borders of block boxes it overlaps.
- Both paragraphs have set 'clear: left', which causes the second paragraph to be "pushed down" to a position below the float — "clearance" is added above its top margin to accomplish this (see the 'clear' property).
- The last thing you need to know about floated elements is how to turn the text wrapping off and get back to layout as usual.This is done by clearing the element that you want to start below the float.
- Applying the clear property to an element prevents it from appearing next to a floated element, and forces it to start against the next available “clear” space below the float.Keep in mind that you apply the clear property to the element you want to start below the floated element, not the floated element itself.
- The left value starts the element below any elements that have been floated to the left
- Similarly, the right value makes the element clear all floats on the right edge of the containing block.
- Similarly, the right value makes the element clear all floats on the right edge of the containing block.