Problem:
<Div id = "TOP" style = "height: 100px; Background-color: # CCC; "> </div> <Div id =" parent "style =" background-color: # f9f; overflow: hidden; "> <Div id =" child "style =" margin-top: 10px; Background-color: # 99f; "> expected results: there is a 10px gap between Chile and parent <br/> after margin-top: 10px, the distance between parent and wrap is 10 PX </div>
Temporary solution:
1. Add overflow: hidden to the parent form;
2. Add Up and down empty elements in the parent class: some textbooks call this method a perfect solution. But we generally do not use it in practice, because this method requires not only adding two meaningless element labels, but also setting CSS to make the height 0 for these two elements .)
3. Add a border attribute to the parent form. The attribute value cannot be none; 0;
4. parent form plus: float: Left; (clear: Both ;)
From: http://www.cssass.com/blog? P = 164
In the topic "haslayout" of the private attributes of stylenx-ie, the first fan of stylenx we mentioned is actually a margin overlay problem.
For margin collapsing, there are clear standards in W3C. All compliance with its rules will generate margin collapsing. W3C believes that the layout interface after the margin overlay is better.
Margin collapsing (css2.1 Specification)
Margin collapsing (css2 Specification)
Margin superposition (parent-child level ):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">It can be seen that the margin of the wrap not quilt layer is supported.
However, such a margin overlay is often not
What we want (some people even call it a bug: a margin overlay bug, or a bug that is highly unsuitable)-In all fairness, we try to avoid margin.The number of collapsing also violates W3C's original intention. However, in IE, haslayout is often triggered intentionally or unintentionally, avoiding the overlap of margin, which makes browsing
Different devices are displayed. Therefore, we still have reason to avoid the margin overlay when appropriate.So how can we avoid such a margin overlay?
From the article "haslayout", we know that triggering haslayout in IE can avoid the margin overlay. What about other browsers?
Let's take a look at the other two solutions.
Method 1: add the upper and lower empty elements in the parent class.
Some textbooks call this method a perfect solution. But we generally do not use it in practice, because this method requires not only adding two meaningless element labels, but also setting CSS to make the height 0 for these two elements .) :<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml">Second, use the border attribute on the parent level (except for attribute values 0 and none ).
This method is not often used, because at least one extra frame of 1px must be set on wrap (the upper and lower sides are 2px), and the color setting of this edge is also a problem, because the background image may be used inside the wrap, this edge cannot be hidden in disguise.<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml">The last method utilizes the haslayout principle of IE (this method is also used to clear floating ). For ff, overflow: hidden is used on the parent (WRAP); for IE, layout is triggered -- how to trigger it. Read this article: on having layout.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">(Overflow: hidden also triggers layout in IE7. However, it is invalid for earlier ie versions, otherwise it can be done with an attribute ).
From: http://hi.baidu.com/xiaminy/blog/item/d9c540d5c2cb6e0ca08bb7fa.html
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
