All geek questions in one place

IE7 and IE8: clear a float without adding empty elements

I have a problem similar to that described here (without permission):

IE7 float and clear the same element

The following HTML is displayed in Firefox, but not in IE7 and IE8:

<html>
<head>
<style>
ul {
    list-style-type: none;
}
li {
    clear: both;
    padding: 5px;
}
.left {
    clear: left;
    float: left;
}
.middle {
    clear: none;
    float: left;
}
.right {
    clear: right;
    float: left;
}
</style>
</head>
<body>
<ul>
    <li>1</li>

    <li class="left">2</li>
    <li class="right">3</li>

    <li class="left">4</li>
    <li class="middle">5</li>
    <li class="right">6</li>

    <li>7</li>
</ul>
</body>
</html>

This is the layout of the form, and in Firefox the results are as follows:

1
2 3
4 5 6
7

What I'm going to. However, in IE7 and IE8 the results are:

1
2 3 5 6
4
7

[Note. I don’t want to float anything to the right, because I want the fields in my form to align correctly to the left, without the gigantic space between the floating fields to account for the width of the parent container.]

Apparently, I need to completely clear and possibly add to the list an empty element of the list of elements for forced cleaning, but this seems like a dumb solution and a kind of purpose.

? .

+3
4

, :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <title>list floats</title>
  <style type="text/css">
  li{clear: none;list-style: none}
  .clearer{float: left; clear: left}
  .floater{ float:left}
  </style>
</head>
<body>
<ul>
    <li class="">1</li>
    <li class="clearer">2</li>
    <li class="">3</li>
    <li class="clearer">4</li>
    <li class="floater">5</li>
    <li class="">6</li>
    <li class="clearer">7</li>
</ul>
</body>
</html>
+3

<br class="clear" /> br.clear{ clear: both; }

+1

. . "clear" "" "" . "solo" , , .

.clear {
    clear: both; 
    margin:0px;
    padding:0px ;
    font-size:1px;
}
.solo {
    clear: both; 
}

<li class="solo">1</li> 

<li class="left">2</li> 
<li class="right">3</li> 
<li class="clear"></li>
+1

. , !

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
li{list-style: none}
.float{ float:left}
</style>
</head>
<body>
<ul>
<li class="">1</li>
<li class="float">2</li>
<li class="">3</li>
<li class="float">4</li>
<li class="float">5</li>
<li class="">6</li>
<li class="float">7</li>
</ul>
</body>
</html>
-1

Source: https://habr.com/ru/post/1740594/

More articles:


All Articles