In the past two months, I have been working as an artist on several websites intermittently. In the process, I have gained a better understanding of the standard development of DIV+Css. There are two things that have gained me the most. One is that I completely understood the CSS Box Model, and the other is that I solved the problem of "closed floating elements" that has troubled me for a long time:
Generally speaking, if a child element uses float, the parent element cannot always know exactly where the child element ends, so the bottom border of the parent element always passes through the middle or even the top of the child element. , looking very uncomfortable.
At first, I added a <br /> or <div></div> after the child element and set its attribute to "clear:all;", but this would require a lot of useless spaces. Tags, and even some websites need to modify the ASP code to automatically add these empty tags, which can only be regarded as a last resort.
Later, I found that when the parent tag is also set to float, it can be closed at the correct position, so I floated the parent tag easily. In this way, a lot of ASP code does not need to be changed. When encountering the need to add the Clear attribute If the empty tag cannot be added from the template but needs to be added from the ASP code, there is no need to change the ASP code. You only need to set the parent container to floating. If you still need to change the ASP, then change the parent container's Setting the parent container to floating and floating it layer by layer will always solve the problem. Although this can save a lot of trouble, it can easily cause the entire page to be filled with floating elements, -_-!!! It can only be regarded as a middle strategy.
Later, when I was searching for other things on the Internet, I accidentally found someone who said that just adding the following two properties to the CSS properties of the parent container would solve the problem:
Example Source Code
[www.downcodes.com] overflow: auto;
_height: 1%;
I tried it, and it worked really well. In this way, this should be considered the best way to solve this problem at present: there is no need to modify the task of the page, and there is basically no need to modify the parent container - even the parent container of the parent container. If you make any changes, just add two indifferent attributes to the parent container and you're done.
