CSS overflow closed floating element ineffective solution

For example, a div contains two spans. If the span is floating, you will find that the background color of the DIV is invalid!

The reason is that the DIV will automatically expand like the traditional table by default, but it does not have this effect on the floating element by default. Therefore, the DIV does not automatically increase one block to accommodate the span.

It is said that the solution is to add an element such as blank text at the end of the DIV, and discuss the use of overflow: hidden; (ie is usually incompatible, and I have tried to make it ineffective, of course, this makes us understand the working principle of overflow ).

To tell the truth, I think these discussions on Div are so painful that we can't directly use the table. There is no need to emphasize CSS standards, of course, "professional" web designers never agree with me.

<Div width = "100%" border = "0" cellpadding = "1" cellspacing = "1" bgcolor = "# cccccc" style = "background-color: # cccccc; overflow: hidden; ">
<Span style = "float: Left; Background-color: # cccccc;" ><{$ group1.group _ name }></span>
<Span style = "float: right;"> partition Moderator: <{$ group1.group _ name}> </span> & nbsp;
</Div>

The most important thing is the "& nbsp ;"

--------------------------------------------------

Http://bbs.blueidea.com/viewthread.php? Tid = 2658256 & extra = Page % 3d1% 26amp % 3 bfilter % 3 drate

According to the CSS specification, floats will be removed from the document stream and will not affect the layout of block boxes, but will only affect the arrangement of inline boxes (usually text. Therefore, when its height exceeds the container, the parent container will not automatically stretch to close the floating element. But sometimes we need this kind of automatic closing behavior. What should we do ?...

--------------------------------------------------

Http://baike.baidu.com/view/1090596.htm

It is very clear here, especially the figure.

Overflow

Directory

Overflow CSS attributes
Japanese game brand
Computer terms
Expand

Edit overflow CSS attributes
Overflow sets the attributes of the content in CSS when the content of an object exceeds its specified height and width.
Basic Features

Initial Value: visible applies to: block-level and replaced Elements
Inheritance: no percentage: N/
Media: Visual version: css2
Compatibility: ie4 + ns6 +

Basic syntax
Overflow-x overflow-y
Overflow: visible | auto | hidden | scroll
Syntax Value
Visible: default value. Do not cut the content or add a scroll bar. If this default value is explicitly declared, the object will be cropped with the size of the window or frame containing the object. In addition, the clip attribute setting will expire. Auto: when required, the object content will be cropped or the scroll bar will be displayed. Hidden: NO content beyond the object size will be displayed. Scroll: always display the scroll bar.
Clear floating
A more popular use of setting overflow is to clear floating. Setting overflow does not clear float on this element. It clears itself (self-clear ). This means that the elements of overflow (auto or hidden) are applied, it will expand to the size it needs to enclose the floating child elements in it (instead of stacked (collapsing), assuming that the height is not defined. Like this:

Instructions for use
Retrieves or sets how to manage content when the content of an object exceeds its specified height and width. The default value of all objects is visible, except that the default value of textarea object and body object is auto. Set the textarea object. This property value is hidden and Its scroll bar is hidden. For a table, if the table-layout attribute is set to fixed, the TD object supports the overflow attribute with the default value of hidden. If it is set to scroll or auto, content beyond the TD size will be cut. If it is set to visible, additional text overflows to the right or left (depending on the setting of the direction attribute) cells. This attribute is available on Mac platform since ie5. Since IE6, when you use it! The doctype declaration specifies the standards-compliant mode. This attribute can be applied to HTML objects. The corresponding script feature is overflow.