Clearfix с начальной загрузкой Twitter

У меня проблема с загрузкой Twitter, которая мне кажется немного странной. У меня есть боковая панель с фиксированной слева и основная область.

<div>
  <div id="sidebar">
    <ul>
      <li>A</li>
      <li>A</li>
      <li>C</li>
      <li>D</li>
      <li>E</li>
      <li>F</li>
      <li>...</li>
      <li>Z</li>
    </ul>
  </div>
  <div id="main">
    <div class="clearfix">
      <div class="pull-right">
        <a>RIGHT</a>
      </div>
    </div>
  <div>MOVED BELOW Z</div>
</div>


#sidebar {
  background: red;
  float: left;
  width: 100px;
}

#main {
  background: green;
  margin-left: 150px;
  overflow: hidden;
}

Inside the main area I have some content with pull-left and pull-right with is cleared by a clearfix.

Проблема в том, что содержимое под clearfix-div перемещается ниже содержимого боковой панели.

Я сделал для этого скрипт: http://jsfiddle.net/ZguC7/

Я решил проблему, установив для параметра «переполнение: коллапс» значение #main, но я этого не понимаю и был бы очень рад, если бы кто-нибудь объяснил, в чем причина этой проблемы.


css twitter-bootstrap-3 clearfix
person SebastianStehle    schedule 05.09.2013    source источник
comment
Я обновил вашу скрипку, jsfiddle.net/ZguC7/123. Я просто изменил положение закрывающего тега div «clearfix», и он исправил высоту   -  person shin    schedule 18.03.2014
comment
Спасибо, но это не то, что я хотел. Текст Hello не должен находиться на одной линии с FOO.   -  person SebastianStehle    schedule 18.03.2014

Ответы (1)


arrow_upward
39
arrow_downward

clearfix должен содержать плавающие элементы, но в вашем html вы добавили clearfix только после плавающего права, которое является вашим pull-right, поэтому вы должны сделать следующее:

<div class="clearfix">
  <div id="sidebar">
    <ul>
      <li>A</li>
      <li>A</li>
      <li>C</li>
      <li>D</li>
      <li>E</li>
      <li>F</li>
      <li>...</li>
      <li>Z</li>
    </ul>
  </div>
  <div id="main">
    <div>
      <div class="pull-right">
        <a>RIGHT</a>
      </div>
    </div>
  <div>MOVED BELOW Z</div>
</div>

см. эту демонстрацию

Рад узнать, что вы решили проблему, установив свойства переполнения. Однако это также хорошая идея, чтобы очистить поплавок. Там, где вы разместили свои элементы, вы можете добавить overflow: hidden;, как вы это сделали в файле main.

person Bhojendra Rauniyar    schedule 05.09.2013
comment
Я также просто добавляю <div class='clearfix'></div> туда, где должен быть мой «разрыв строки», и это прекрасно работает. - person Dudo; 07.07.2014