Summary of div css? div is not set under FF..._html/css_WEB-ITnose

Favorite, thank you

Original address: div css summary? The solution to the problem that the div does not set the height background color or the outer border cannot be displayed under FF Author: Tianya Haijiao

When using div css for web page layout, if the external div has a background color or border without setting its height, it will display normally in IE browser. However, when browsing using Firefox/opera, there is a problem that the background color and border of the outermost Div do not work.

General structure

css file: (Only the most important part of the css code is written: it defines the background color and border of the outermost div, and also defines the inner div is floating)
.outer{border:#F00 1px solid; background:#FF9 repeat;}
.inner1,.inner2{float:left;}
displays normally in IE, as shown in the figure 1

(Picture 1)
is not displayed properly in FF, and neither the border line nor the background color is displayed normally, as shown in Figure 2

(Picture 2)

After consulting some information on the Internet, I had a general understanding of this issue.

Reason analysis: Because in Firefox and Opera: if the DIV inside is floating (float) and the parent body will not calculate the height after the float of the child body. This kind of calculation is supported in IE, so it works normally under IE.

So there are two prerequisites for this problem: 1. The outer div has no height set; 2. The inner div is floating (with the float attribute).

Solution:
Set the height of the outer div directly (not recommended), because many times we don’t know the height of the outer div, and we hope to rely on the inner div to automatically expand the outer div based on the content. , unless you know for sure the height of the outer div, so this method is not recommended.
Method 1:
Add a clear float after each internal div (recommended), so that Firefox and Opera will not regard it as a float, and will automatically calculate the height of the internal div

Method 2:
Add an overflow:hidden; in .outer (I don’t particularly understand this method, but after testing, This problem can also be solved)
The overflow attribute specifies what happens when the content overflows the element box. If the height of the outer layer is set and the height is less than the actual height occupied by the inner layer, part of the content of the inner layer will be hidden.