The layout of the DIV is not easy to grasp, and its rule is still hard to understand. Let's just memorize some phenomena first.
DIV is a block-level element. By default, it occupies the entire row of the parent container by default. Other objects of the same level are displayed in the next row. However, after a div is set to float, the DIV itself will be adjusted to the size required by the content according to the needs of the content, and the subsequent block-level object will be displayed next to it, run the following HTML code to see the effect.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
<HTML xmlns = "http://www.w3.org/1999/xhtml" XML: lang = "en" lang = "en">
<Head>
<Style type = "text/CSS">
# Menu {
Background-color: red;
Float: left;
/* Clear: Both ;*/
}
# Content {
Background-color: green;
}
# Submenu {
/* Background-color: Blue ;*/
}
</Style>
</Head>
<Body>
<Div id = "menu">
<Div id = "submenu"> menu area </div>
</Div>
<Div id = "content">
Content Area
</Div>
</Body>
</Html>
To enable the content area to be displayed in the same way as below, the clear: Both attribute is set in the floating Div, and the display result does not change. Try again to clear: the both attribute is added to the DIV that indicates content, and the content area is displayed in the next line. it seems that,You cannot set the clear attribute for objects that have set the float attribute.
If I do not set the float attribute in the menu areaSet the float attribute of the DIV area inside the menu area. The result is exactly the same as setting the external menu area directly.This makes me very confused. It is reasonable to say that if I have not set the float attribute of the external menu area, this menu area should own a full row, its internal Div area floats inside the menu area according to the float attribute, but this is not the case now! I then explicitly set the width of the menu area, and then I saw the expected effect under IE, that is, the menu area occupies the specified width, its internal Div area floats in the menu area according to the float attribute, and the line feed in the content area is displayed. However, the running effect in Firefox is very strange, I don't want to pursue it any more. This should be a Firefox bug. The experiment code is as follows:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
<HTML xmlns = "http://www.w3.org/1999/xhtml" XML: lang = "en" lang = "en">
<Head>
<Style type = "text/CSS">
# Menu {
Width: 200px;
Background-color: red;
}
# Content {
Background-color: green;
/* Clear: Both ;*/
}
# Submenu {
Background-color: blue;
Float: right;
}
</Style>
</Head>
<Body>
<Div id = "menu">
<Div id = "submenu"> menu area </div>
</Div>
<Div id = "content">
Content Area
</Div>
</Body>
</Html>
1. Clear indicates that the floating element is cleared, and the content is not floating. Therefore, after setting clear for the menu, there is no effect. You can try floating the content to see what will happen.
2. The only DIV in the menu is floating. For the menu, there is no non-floating element in it, so it has no height, therefore, the content layer below occupies the position of the menu, while the floating DIV in the menu is still floating.
You can add some non-floating text (or height) to the menu to see what the effect will be.
This is not a bug of ff, and it will be like this if you use opera.
IE calculates the height for the floating element. The two sides have different interpretations.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
