Очистка плавающих очисток на неродственном элементе

Question

Я думаю, что я позволю коду говорить:

.aside {
    float: right;
    width: 200px;
    background: red;
}

.main {
    margin-right: 220px;
}

.main ul li {
    border-bottom: 1px solid black;
}

.main ul li img {
    float: left;
}

/* clearfix */
.clearfix:before,
.clearfix:after {
 content: " ";
 display: table;
}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}

<div class="aside">
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
</div>
<div class="main">
    <ul>
        <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 1</div></li>
        <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 2</div></li>
        <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 3</div></li>
        <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 4</div></li>
    </ul>
</div>

Вот проблема, с которой я столкнулся: первая запись в списке очищается для родительского и родительского div, а не для содержимого внутри самого div. (Если вы не видите проблемы, просто сузьте окно браузера.) И я действительно не могу исправить эту ситуацию. Попробовал с относительным позиционированием и т. Д. Попытался исправить это вручную очистив поплавки. Но ничего не помогает.

Для меня это выглядит как очень странное поведение, которого я никогда не видел прежде. Но я уверен, что руководитель CSS может сказать мне, в чем проблема и как обойти ее.

Answer 1

Правильный способ исправить это - установить контексты блочного форматирования (BFC).

Общие способы их установления:

• настройка overflow ни к чему, кроме visible например, hidden
• Извлечение из потока (плавающее или абсолютное позиционирование)
• настройка display в inline-block, table-cell или же table-caption

Чтобы избежать этих хакерских способов, Display L3 представляет display: flow-root, который ведет себя как block но создание BFC. Это было бы прекрасно, но, к сожалению, браузеры пока не поддерживают это.

Затем вы можете установить BFC в

• .main например,

  .main {
    overflow: hidden; /* Establish BFC */
  }
  

  .aside {
    float: right;
    width: 200px;
    background: red;
  }
  .main {
    margin-right: 220px;
    overflow: hidden;
  }
  .main ul li {
    border-bottom: 1px solid black;
  }
  .main ul li img {
    float: left;
  }
  /* clearfix */
  .clearfix:before,
  .clearfix:after {
    content: " ";
    display: table;
  }
  .clearfix:after {clear: both;}
  .clearfix {*zoom: 1;}

  <div class="aside">
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
  </div>
  <div class="main">
    <ul>
      <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 1</div></li>
      <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 2</div></li>
      <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 3</div></li>
      <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 4</div></li>
    </ul>
  </div>

• .main > ul например,

  .main > ul {
    display: inline-block;    /* Establish BFC */
    width: calc(100% - 40px); /* Full width (minus padding) */
    padding-left: 40px;
  }
  

  .aside {
    float: right;
    width: 200px;
    background: red;
  }
  .main {
    margin-right: 220px;
    overflow: hidden;
  }
  .main > ul {
    display: inline-block;    /* Establish BFC */
    width: calc(100% - 40px); /* Full width (minus padding) */
    padding-left: 40px;
  }
  .main ul li {
    border-bottom: 1px solid black;
  }
  .main ul li img {
    float: left;
  }
  /* clearfix */
  .clearfix:before,
  .clearfix:after {
    content: " ";
    display: table;
  }
  .clearfix:after {clear: both;}
  .clearfix {*zoom: 1;}

  <div class="aside">
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
  </div>
  <div class="main">
    <ul>
      <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 1</div></li>
      <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 2</div></li>
      <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 3</div></li>
      <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 4</div></li>
    </ul>
  </div>

• .main > ul > li например,

  .main > ul > li {
    float: left; /* Establish BFC */
    clear: left; /* Prevent adjacency */
  }
  

  .aside {
    float: right;
    width: 200px;
    background: red;
  }
  .main {
    margin-right: 220px;
    overflow: hidden;
  }
  .main ul li {
    border-bottom: 1px solid black;
    float: left;
    clear: left;
  }
  .main ul li img {
    float: left;
  }
  /* clearfix */
  .clearfix:before,
  .clearfix:after {
    content: " ";
    display: table;
  }
  .clearfix:after {clear: both;}
  .clearfix {*zoom: 1;}

  <div class="aside">
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
  </div>
  <div class="main">
    <ul>
      <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 1</div></li>
      <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 2</div></li>
      <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 3</div></li>
      <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 4</div></li>
    </ul>
  </div>

• .main > ul > li > .clearfix Например, (с перекрытием)

  .main > ul > li > .clearfix {
    position: absolute; /* Establish BFC */
  }
  

  .aside {
    float: right;
    width: 200px;
    background: red;
  }
  .main {
    margin-right: 220px;
    overflow: hidden;
  }
  .main ul li {
    border-bottom: 1px solid black;
  }
  .main > ul > li > .clearfix {
    position: absolute;
  }
  .main ul li img {
    float: left;
  }
  /* clearfix */
  .clearfix:before,
  .clearfix:after {
    content: " ";
    display: table;
  }
  .clearfix:after {clear: both;}
  .clearfix {*zoom: 1;}

  <div class="aside">
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
  </div>
  <div class="main">
    <ul>
      <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 1</div></li>
      <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 2</div></li>
      <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 3</div></li>
      <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 4</div></li>
    </ul>
  </div>

Answer 2

Это похоже на проблему с clearfix класс, который вы используете. Он пытается очистить плавающий элемент изнутри. Так что, если это не очистит и очистит только локальные операции с плавающей точкой, то эта проблема не произойдет:

.main ul li {overflow: hidden;}

Предоставление вышеуказанного кода очистит поплавки локально.

.aside {
  float: right;
  width: 200px;
  background: red;
}

.main {
  margin-right: 220px;
}

.main ul li {
  border-bottom: 1px solid black;
}

.main ul li img {
  float: left;
}

.main ul li {overflow: hidden;}

<div class="aside">
  <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
  <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
  <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
  <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
</div>
<div class="main">
  <ul>
    <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 1</div></li>
    <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 2</div></li>
    <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 3</div></li>
    <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 4</div></li>
  </ul>
</div>