Common problems and solutions for floating div css_html/css_WEB-ITnose

Today I finally have time to write an article. If there are any mistakes, please correct me. I just want beginners to avoid detours. When I was learning, I encountered obstacles everywhere. Some very simple questions such as " "Div CSS floating" was written so profoundly by some awesome people. It took me a long time to understand that it turned out that it was based on one attribute that involved all the eighteen generations of the ancestors of that tag! Not to mention....

First of all, you must be a web architect or will become one. To be honest, I am not very optimistic about this industry now because there are too many people doing this now. Well, who calls it IT? The more you do, the less valuable it becomes! Haha, let’s complain, now let’s get to the point!

1. Some BUG problems with float in IE6

When using float to layout in a web page, there will be some problems that are difficult to understand or even unbelievable for us, such as: In IE6, there will be a 3PX blank space on the right side. At this time, other browsers are very standard. We take it for granted that IE6 is lagging behind and few people will care about it now. But as a designer, you must be responsible for your work. In fact, the solution to this problem is very simple. Here we need to use some HACK technology and add a line in your css such as: .box{margin-right:0px; margin-right:-3px!important;} and that’s it! If you don’t know HACK technology, you can check it online, there are many!

2. Float confusion layout div css float

The most common problem is that when you use the float attribute on the two blocks above, the block below will appear on top. On the right side, this problem is a headache when designing, and it is also the most confusing thing for many beginners. Now this is actually very simple. Use the clear attribute of the clear element, which is to write a container under the above two divs such as:

#bb{float:left;width:480px;}

#aa{width:960px; margin-top:5px;}

#clear{clear:both;}

......

......

....

This will solve this long-standing problem.

3. Float appears with double spacing

When li uses the float attribute, double spacing will appear. That is, when you set the left margin of li to 3PX, but it will have a left margin of 6PX. , this can be solved by simply setting an inline attribute on the css of the li element: display:inline.

4. When the child element of unknown height is floated, let the parent element adapt to the height

You can add

at the end of the parent element .....

can be like:

#oo{ margin:0 auto;width:960px;}

#bb{float:left;width:480px; }

#aa{width:960px; margin-top:5px;}

#clear{clear:both;}

...

...

.... .

. Same as above if the child elements are also adaptive in height.

This is a common problem and solution for floating div css that I have encountered now. If there is something wrong, please correct me. Everyone is welcome to discuss together