Clearing floats (method of clearing floats) created by a foreigner_Experience exchange

What I commonly use is the clear:both; method, such as

I saw another method like this in PlanABC, so I recorded it.

div.container {
border: 1px solid #000000;
}

div.left {
width: 45%;
float: left; }

div.right {
width: 45%;
float: right;
}


Layer nesting relationship: container's div contains left and right

The simplest and most reasonable way to clear floats (red bold part):

div.container {
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}

Compatibility: IE6 IE7 FF MacIE, etc.

Source address: http://www.quirksmode.org/css/clearing.html

PS: However, there seems to be a small bug in the process of using it. Xiaoma from Taobao has encountered it. The specific symptom is that the IE6 middle layer clears the floating divs, causing some links to be unclickable.