Как использовать «clearfix» css во вложенных блоках? - PullRequest
Новая
       35

Как использовать «clearfix» css во вложенных блоках?

0 голосов
/ 20 января 2020

Я обнаружил, что css пример "clearfix" не работает должным образом, когда есть вложенные блоки: float: left.

Вот пример: 

.left {
  float: left;
  width: 100px;
  height: 200px;
  background: green;
}

.right {
  margin-left: 100px;
  background: yellow;
}

.clearfix:after {
  content: ' ';
  display: table;
  clear: both;
}

ul.clearfix {
  padding: 10px;
}

.clearfix li {
  float: left;
  list-style: none;
  border: 1px solid red;
}
<div class="left">
  Image
</div>
<div class="right">
  <ul class="clearfix">
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
  <p>Some description</p>
</div>

Это показывает, что текст "некоторый текст" появляется совсем под "левым" блоком. Пока там представлен огромный пробел после списка элементов с «clearfix» css. Любые идеи, чтобы это исправить?

Ответы [ 3 ]

0 голосов
/ 20 января 2020

Вы можете использовать CSS clear: both; для своего абзаца 

.left {
  float: left;
  width: 100px;
  height: 200px;
  background: green;
}

.right {
  margin-left: 100px;
  background: yellow;
}

.list:after {
  content: ' ';
  display: table;
  clear: both;
}


.footer{ clear: both;}

.list li {
  float: left;
  padding: 10px;
  list-style: none;
  border: 1px solid red;
}
<div class="left">
  Image
</div>
<div class="right">
  <ul class="list">
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
</div>
<div class="footer"><p>Some description</p></div>
0 голосов
/ 20 января 2020

Итак, мои оценки относительно float: оставленные в разных контейнерах ошибки. Свойство Float помещает все блоки в один поток независимо от их контейнеров. Таким образом, означать «вложенные» блоки по отношению к этим плавающим блокам бесполезно.

Другая проблема заключается в том, что контейнер не имеет размера без clearfix. Решение - установить ul.overflow: скрытый

0 голосов
/ 20 января 2020

В этом конкретном случае вы можете создать встроенный блок p, и вам не понадобится clearfix (по крайней мере, внутри элемента right). Возможно, вам придется очистить после нужного элемента, если у вас будет больше контента. 

.left {
  float: left;
  width: 100px;
  height: 200px;
  background: green;
}

.right {
  margin-left: 100px;
  background: yellow;
}

ul.clearfix {
  padding: 10px;
}

.clearfix li {
  float: left;
  list-style: none;
  border: 1px solid red;
}
p {
  display:inline-block;
  width:100%;
}
<div class="left">
  Image
</div>
<div class="right">
  <ul class="clearfix">
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
  <p>Some description</p>
</div>
...