Overview of CSS floating attributes

Does CSS actually float? Overview of CSS floating attributes

Level: Intermediate Michael Russell (MikeRussell@VickiFox.com), System Architect, Vicki Fox productions, Inc. April 22, 2008 CSS float is a common tool used in the toolbox of web designers for page layout, however, inconsistency in browser implementations often results in the inability to understand and use this attribute. This article focuses on the floating attributes and their usage, the development tools involved, and the inconsistency of browsers. From the early days of human writing, we have seen the practice of Text wrap. The Web pioneers have long recognized the aesthetic value of Text wrap and orchestration and the space they can save, as a result, Netscape 1.0 and HTML 2.0 both provide a float function. The floating function is also a basic attribute of the standard HTML and Cascading Style Sheet (CSS) specifications. Although the definition of the "floating" attribute is very intuitive, the implementation and use of this attribute has made many web page designers painstaking and invested a lot of time to make the page display as desired. In this article, I will introduce the following aspects of the "floating" attribute: Definition and Conceptual Model Common Use Cases Issues with development tools Browser Problems What is the "floating" attribute? In the css2 specification, you can find the authoritative definition and behavior principle of floating attributes. In the subsequent sections of this article, I will discuss the content described in section 9.5 "visual formatting model" in css2 standards (for links, see references ). Definition The floating Property specifies whether a box should float to the left or to the right. This attribute can be applied to any element that can generate a box that is not absolutely fixed. This attribute can have the following values: Inherit-This element inherits the floating attribute of the encapsulated element. This value is the default value. Left-This element generates a block box floating to the left. Content is arranged to the right of the box and starts from the top. This arrangement depends on the "clear" attribute of the element. The "display" attribute is ignored unless the value is "NONE. Right-This arrangement depends on the "clear" attribute of the element. The "display" attribute is ignored unless the value is "NONE. None-This box does not float. Action Floating attributes are subject to the following rules. In this article, I will only describe the left floating behavior in detail. To obtain information about the right floating behavior, you only need to swap the direction (that is, change the left to the right ). This specification defines Behavior Based on the border of the box. The four border descriptions in the CSS box model are as follows: Content edgeOrInner EdgeThe content of the rendered element. This is the closest edge to the content. Padding edgeIncludes the whitelist of an element. The padding edge defines the edge of the contained block. Border edgeIt includes the boundaries applied to an element. Margin edgeOrOuter EdgeIncludes the border applied to an element. Horizontal limit of contained Blocks: The margin edge of the left floating box cannot be on the left side of the left padding edge box containing blocks. Vertical Limit of contained Blocks: The upper margin edge of the left floating box cannot be higher than the upper padding edge of the contained block. Previous floating restrictions: If the current box is a left floating box and the previous box is also a left floating box, the left margin edge of the current box must be on the right of the right margin edge of the previous box, or the upper margin edge of the current box must be lower than the lower margin edge of the previous box. No overlap Restriction: The right margin edge of the left floating box cannot be in the right of any right floating box that shares the same horizontal space. Vertical restrictions of previous elements: The upper margin edge of the left floating box cannot be higher than any block or the upper margin edge of the Floating Box generated by the first element in the source document. Line-box vertical Restriction: The upper margin edge of the left floating box cannot be higher than the upper padding edge of any line-box containing the box generated by the first element in the source document. Line-box is a hypothetical rectangular box that contains all the inline boxes that are connected into a line of elements at this level. The height (top padding edge) is the highest line-box height. Horizontal border Restriction: If a left floating box has another left floating box on the left, the right margin edge of the left floating box cannot contain the right padding edge of the block. That is, the left floating box cannot exceed the right edge of the contained block, unless it has been positioned far to the left. Optimal Vertical Limit: The floating box must be placed in the position as high as possible in the contained block. Optimal horizontal Restriction: The floating box must be placed as far as possible to the left of the included block. Location priority principle: When determining the position of the floating box, the optimal Vertical limit is better than the optimal horizontal limit. That is, first move the floating box up and then move it to one side. Figure 1 shows how these behavior principles locate a border image related to a text block. Figure 1. Positioning example of the left floating box Other considerations One question that makes web design beginners confused is where floating elements should be placed in the source document. To solve this problem, you can use the following experience guidance. Positioning: The browser determines the vertical position of the floating element relative to the position of the element in the "normal arrangement" of the document. The normal arrangement refers to how the document will be displayed if the browser ignores the positioning attribute. The floating element is extracted from the orchestration and moved as far as possible to the left (or right) of the contained block. Inline into Block: For page formatting, the floating element becomes a block box. This is equivalent to specifyingdisplay: blockAttribute. Required width: The float element must have a specified width. The css2 specification requires that an element must either have an explicit width specified using the "width" attribute or an implicit width calculated from the contained sub-element (ratio. The implicit width of an image is part of the image attribute. If the width is not specified, the result is unpredictable. Back to Top What is the "clear" attribute? The subsequent elements of the floating element will be around the floating element. In general, this is a desired effect for text. However, if floating is used for layout, the surrounding behavior must be stopped. To stop this action, you must specify the "clear" attribute for subsequent elements. The css2 specification provides authoritative definitions of clear attributes and behavior principles. In subsequent sections of this article, I will discuss "visual formatting model" in Section 9.5 of css2 specifications (see references ). Definition ClearAttribute indicates which side or side of an element's box does not need to be adjacent to the previous floating box. If the element itself has floating offspring, the clear attribute has no effect on these offspring. The clear attribute can only be applied to block-level elements. This includes the elements that are converted into block-level elements by using floating attributes. This property can have the following values: Inherit-This element inherits the clear attribute of the encapsulated element, which is the default value. Left-Add the upper border of the generated box so that the upper border edge is under the bottom margin edge of any left floating box generated by the previous source element. Right-Add the upper border of the generated box so that the upper border edge is under the bottom margin edge of any right floating box generated by the previous source element. Both-Move the generated box to all floating boxes generated by the previous source document. None-Do not apply any restrictions related to the previous floating element to the position of the box. Action The action of the clear attribute is basically to modify the rule for locating the floating element. In this specification, behavior is also considered as an additional limitation. Clear restrictions: On the floating box, the margin edge must be in all previous left floating boxes (in the case of "clear: Left") or all previous right floating boxes ("clear: right), or the two ("clear: both") under the bottom of the margin edge. Figure 2 shows an example of using the clear attribute. Both sections have the property "clear: left ". This does not affect the floating box defined in the first paragraph or in the first paragraph. The clear attribute only positions the second paragraph under the float. Note how the upper border of the second paragraph is vertically expanded to connect to the bottom border of the previous paragraph. Figure 2. Clear positioning example Other considerations A common difficulty related to the clear attribute is that it often requires additional tags to be added to subsequent elements in the document. Listing 1 shows how to add a blank division to add a non-content tag to the HTML document. Listing 1. Handling clear requires additional marking <div class="myFloatClass"> <p>myFloatClass has float:left specified</p></div><div class="myClearClass" /> <!--myClearClass has clear:left specified--> Several authors have proposed various technologies to eliminate the need to add additional tags to HTML documents. These technologies include: Add "float" to the container element ". Add "overflow: hidden" to the container element ". Add a css2 ": After" pseudo class to the container element. Float container Technique): This technique is often used in page layout and horizontal navigation menus-placing a floating element in a floating container. The floating container is expanded to include all the internal floating elements. In this way, the container width attribute needs to be set accurately. 100% is a common setting. This technology has several disadvantages. The first disadvantage is that it is difficult to set the width. Using 100% may conflict with the reserved IP address. Second, Internet Explorer V6 may also add an additional bottom border. Finally, the deep nesting of floating boxes often leads to unpredictable behavior in the browser. Listing 2 shows the CSS code used by this floating container technology. List 2. floating container Technology .myFloatClass { float: left; width: 100%;} Hidden overflow container Technique): This method is rarely used. It involves the use of the "overflow" attribute and the default "clip" Attribute-an overflow element is expanded to the size of all contained child elements (including floating elements. This technology also has several disadvantages. First, overflow may affect the container's fluid height. Second, overflow needs to trigger the "haslayout" attribute of Internet Explorer V6. Listing 3 shows the CSS code used to hide the overflow container technology: Listing 3. Hiding overflow container Technology .myFloatClass { overflow: hidden; height: 1%; /* Or zoom:1 to trigger IE's hasLayout */} Analyze this article ...... Submit to Digg Release to Del. icio. us Slashdot! : After pseudo Technology: This method is rarely used. It involves the use of CSS pseudo classes to generate content after the container. Use the: After pseudo-class technique to append a new element with the specified clear attribute to the result HTML document. This technology is the least admired, and few browsers provide support. Internet Explorer V7 or earlier versions do not support: After pseudo-class technology. But most importantly, this technology inserts meaningless content into the result HTML document. Listing 4 shows the CSS code used by the after pseudo-class technology. Listing 4.: After pseudo-class technology .myFloatClass { height: 1%; /* Or zoom:1 to trigger IE's hasLayout */}.myFloatClass:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} What are the applications of "floating? Floating attributes are common tools in the Web Designer toolbox. The number of applications far exceeds the imagination of the designers. The following are some common applications of floating attributes. The reference section lists books and websites on how to use float to achieve the expected results. Anchored Image: Moving an image to the left or right is only partial. Because float is valid only when the element is included in the source document, float sets an anchor at this point. This is important for text documents, because in such documents, it is often necessary to keep the image relative to the text describing the image. Add title: Generally, it is more ideal to add titles to images, for example, adding "Figure 1 example image" to images ". You can add a title to an image by placing the image in another container, such as a part (<div>) and floating the part. Oversized uppercase letters: You can recreate a classical book style, that is, place a large uppercase letter in the upper left corner of a piece of text. However, you cannot only change the font size. In this case, upper and lower letters are higher than other texts. Instead, you want the letter to stretch down into the text, and the rest of the text is centered around the letter. Inline list: A combination of float and display. inline is used to convert Unordered Lists (<ul>) into horizontal menus or navigation tabs. A menu is displayed as a list of options in a web browser (for example, a browser that only displays text) that cannot display advanced or graphical la S. Multi-column page layout: Using tables for multi-Column Layout on pages usually makes the pages extremely difficult to maintain, because there are too many useless tags in the source document. With the development of browsers compatible with web standards, the use of division and CSS can achieve the same layout effect, but the number of tags in the source code is much less. The floating attribute makes the division block equally important to table cells. Flexible image library page: Traditionally, tables are generally used to layout images. The problem with tables is that they are not fluid and cannot respond very well when users scale windows. By using floating images, although the image library looks like a table layout, the layout also gets narrower or wider as the user scales the window. For example, if 12 images are displayed on a page with good flexibility, the following display combinations may exist: 1x12, 2x6, 3x4, 4x3, 6x2, and 12x1. Is there any development tool? Every developer knows that not all HTML/css wysiwyg editors are the same. Each editor has its own characteristics, compliance with web standards, and selection of the page rendering engine. My experience with popular WYSIWYG editors (such as IBM Rational Software Architect V7, Adobe Dreamweaver CS3, and genuitec myeclipse V6) is that they are often helpful for initial Page preparation, however, to adjust and optimize pages, you usually have to perform source code-level work. It is critical to test the page in the target browser. Many editors support plug-ins for various browsers. In this way, you can start a browser from the editor to test the page. To evaluate a WYSIWYG editor, we recommend that you use acid2 browser test to test the Editor (see references. Developed by the web standards project, acid2 browser test is used to test the Web Standard compatibility of various browsers. However, you can also use the acid2 browser test source to test the standard web compatibility of your alternative html/css wysiwyg editor. Are there any browser considerations? Web designers have discovered many non-standard behaviors in popular web browsers. Various browsers implement nested floating elements in different ways. The result is that for the purpose of positioning, it is often necessary to avoid deep nesting of floating elements. In these cases, a better way is to use relative and absolute positioning attributes. Internet Explorer: Position is the directory where the everything site maintains Internet Explorer bugs and fixes. See the explorer exposed page. Firefox: A location-related bug I found in Firefox is the top gap bug. This bug usually occurs in Multi-column layout, where the column is floating, but the header section is not. If an element in a column has an upper border, the border is pushed to the header, leading to a gap between the top of the window and the top of the header. The solution is to place something on the floating bar. One way is to add an element to the bottom of the header with the clear: Both attribute. Another way is to let the header also float. Opera: Position is the directory where the everything site contains opera bugs and fixes. See the opera omnibus page. Conclusion Since the emergence of Web browser technology, the function of floating elements on the page already exists. In modern web design, more and more floating attributes are used to obtain the page layout previously implemented using tables. Although the definition and behavior of floating attributes are simple, browser inconsistency makes it difficult to use this attribute. This article only gives a very simple introduction to floating attributes. For more information, see references. Of course, you must be brave enough to practice it yourself. References

Http://www.ibm.com/developerworks/cn/web/wa-css? S_tact = 105agx52 & s_cmp = NL & CA = dnl-cn-04232008