Super simple way to close floating elements_CSS/HTML

A very good little tip I saw accidentally. It’s about using CSS to handle closed floating elements. I collected it.

There are many methods for closing floating elements (clearing float). You still haven’t. If you know more about it, check out old9’s blog. There is an article about closing floating elements.

My favorite of these methods is to use the :after pseudo-class to dynamically embed an element for clearing floating elements. Unfortunately, the amount of code is too large and it doesn’t look concise enough. Now I see there is a super simple method. Let me introduce it quickly. The original text is at: http://annevankesteren.nl/2005/03/clearing-floats

The principle is this. The reason why peripheral elements cannot be extended well is the overflow. on, because the overflow is not visible. See W3C’s explanation

Quotation content:

In addition, if the element has any floating descendants whose bottom margin edge is below the bottom, then the height is increased to include those edges. Only floats that are children of the element itself or of descendants in the normal flow are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.

Now just add an overflow:auto; to the peripheral element to solve the problem. The result is that except for IE, it can really be solved. The problem of IE will be solved next. Add _height:1%; and the problem will be completely solved.

The following are three examples I made for comparison

1.No closed floating element
2.Closed floating element under non-IE
3.Completely closed element

<p> </p> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Super simple clearing floats</title> <style type="text/css"> <!-- body{ font:.9em/150% Verdana, Arial, Helvetica, sans-serif normal; color:#333333;} h1{ background:#f5f5f5; padding:6px;} em{ color:#f60; font-style:normal;} code{ display:block; font-family:"Courier New", Courier, monospace; border:1px #ccc dotted; padding:10px;}<style type="text/css"> <!-- body{ font:.9em/150% Verdana, Arial, Helvetica, sans-serif normal; color:#333333;} h1{ background:#f5f5f5; padding:6px;} em{ color:#f60; font-style:normal;} code{ display:block; font-family:"Courier New", Courier, monospace; border:1px #ccc dotted; padding:10px;} <P>#wrap_three{ border:6px #ccc solid; overflow:auto;_height:1%;} .column_left{ float:left; width:20%; padding:10px;} .column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;} <P>--> </style> #wrap_three{ border:6px #ccc solid; overflow:auto;_height:1%;} .column_left{ float:left; width:20%; padding:10px;} .column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;} <p>--> </p> <div id="wrap_three"> <div class="column_left"> <h1> </h1> <p> </p>Float left<code>.column_left{ float:left; width:20%; padding:10px;}</code> </div>This layer floats left<div class="column_right"> <h1> </h1> <p> <em>Float right</em> <em>This layer floats right. Below is the complete CSS. This is a peripheral wrap_three layer application with </em>overflow:auto;</p>plus <code> #wrap_three{ border:6px #ccc solid; overflow:auto; _height:1%;} .column_left{ float:left; width:20%; padding:10px;} .column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}</code>_height:1%;</div> closed float model. Peripheral containers can be extended normally. IE6.0, Firefox 1.5 and Opera 9.0 all passed the test. </div>