Div+css New beginning of Web layout design (7)

Below the back two horizontal div margin overlap problem

IE6 and Firefox are the same.
This indicates that the horizontal margin does not overlap

How the first div is not set to float, the 2nd one is set
Then it's not arranged horizontally.


Look at Firefox first.


Here you can see that for the div and normal div for float, the vertical margin is not coincident
Looking at the IE6.


2nd Div Unexpectedly put the left margin and the first Div added, is 10px, so that browser compatibility problem is very troublesome AH



A floating div can be positioned according to a common Div.




Can the normal div be positioned according to the floating div? Experiment.



This is where the 3rd div is deliberately bigger.


As can be seen, it is not known that the 2nd Div exists, but based on the first ordinary div to set the bit, the middle distance 50px
Here the 3rd Div does not cover the 2nd Div, but below him, and the 2nd div in a different color.


Because ordinary div can only be on the ground, impossible to the air

Look at the display of IE6 ...


I think using IE6 to learn CSS is a tragedy ...




So, can floating div be positioned according to floating div?


The answer is yes.


IE6 is the same.


Here's a summary
Floating elements can be positioned based on non-floating elements (that is, ordinary div) and floating elements.
Non-floating elements can only be positioned on non-floating elements and cannot be positioned according to floating elements

So, the metaphor for the airport has to be reinterpreted.
A floating element is a plane that flies in the air, a non-floating element, a plane parked on the ground.
How non-floating elements occupy an area, the floating element will not occupy the area, because the ground can be seen in the air, so can be based on non-floating elements to locate
And if the floating element occupies an area, the non-floating element on the ground is not aware of the situation in the air, so will not know its existence, so the two will occur coincident, one in the sky, a ground



The above is div+css page layout design New Beginning (7) content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

