float left and clearing it

Example 1: The menus are not the same Size (not good):

• link 1
• link 22
• link 3333

Example 2: The menus are the same size. Super!!!

• link 1
• link 22
• link 3333
We are in ul with width: 100%;

Description:
In the first example the style li {display: inline;} causes the li-elements go inline (left)
But, the size of elements different, although we use CSS a {width: 6em;}.

In the second example we use CSS:

	ul.float a{
		float: left;
	}

So they have the same size. And if we use in addition the CSS:

	.float:after {
		display: table;
		line-height: 0;
		content: "";
		clear: both;
	}
Than the next Element after .float is not float-left anymore, and goes in the next line.