Ie6/7 margin-bottom failure Solution

Problem description:In ie6/7 browser, the floating element is close to the element of the last row of the parent element.(Single row refers to 1st rows)The margin-bottom value of is invalid!

Problem code:

<Style type = "text/css">

Ul {width: 250px; border: 1px # f00 solid; overflow: hidden;} ul li {float: left; width: 100px; height: 35px; border: 1px # 00f solid; margin-bottom: 10px ;}</style>

<Ul>

<Li> test margin-bottom </li> <li> test margin-bottom </li> </ul> <div> I am the following element </div> Trigger condition:The child element is set to float, and the margin-bottom value is added (the parent element has overflow: hidden to clear the float) Solution:  Method 1:(A floating element is added) The Code is as follows: 

<Style type = "text/css">

. Fix {clear: both; width: 0; height: 0; display: block; overflow: hidden ;}Ul {width: 250px; border: 1px # f00 solid; overflow: hidden;} ul li {float: left; width: 100px; height: 35px; border: 1px # 00f solid; margin-bottom: 10px ;}</style>

<Ul>

<Li> test margin-bottom </li> <li> test margin-bottom </li> <Li class = "fix"> </li></Ul> <div> I am the following element </div> Method 2: For ie6/7, add the padding-bottom attribute to the parent element. The value is equal to the value of margin-bottom of the child element. (We strongly recommend that you use this attribute !)  The Code is as follows:<Style type = "text/css"> ul {width: 250px; border: 1px # f00 solid; overflow: hidden; * Padding-bottom: 10px;} Ul li {float: left; width: 100px; height: 35px; border: 1px # 00f solid; margin-bottom: 10px;} </style>

<Ul>

<Li> test margin-bottom </li> <li> test margin-bottom </li> </ul> <div> I am the following element </div>, write memo!