Practical notes on making webpages using div + css

The following content is the div css coding note of a netizen. It is worth learning. In actual work and development, we will record the content in our work and look back on the past, you will also get a lot of results. If you can communicate with everyone at webjx.com, I believe the progress will be faster. Everyone works together!

Recently, I was doing div + css cutting on the magic net. Last night I found a problem that has never been recorded for a long time! It is compatible with the float attribute of IE and FF. While you are still awake, write down your notes first:

1. Two div styles in one row side by side: When the left float is set for the sub-div in ie or ff, if the left float is not set for the other sub-div, there is a difference between the two browsers. The Compatibility method is to set the float attribute. But remember that if float is set, float clear should be removed. Otherwise, the following div will be stacked on the div with float. I usually write the clear floating as a separate <div class = "clear"> </div> to put it at the bottom of all floating div.

2. In the above 1 case, you need to set the width of the sub-div. If this parameter is not set, the width of the sub-div will be set to 100% of the parent div by default, so that float will not produce any effect at all. Of course, you can also use the display: inline method to make the two sub-div side by side, but in this case, the width setting of the div will be invalid (to make the sub-div large, you can only test the elements in it ).

3. After the parent div in ie is set to a specific height, assume that the height of the sub-div in it (with float, the base of the div with float clearance is the total height) when the height of the parent div is exceeded, ie will automatically increase the parent div, but ff cannot. The height of the parent div in ff will remain, and the child layer inside will overflow out. Compatible method: do not set the parent layer height.