Может кто-нибудь подробно объяснить, как работает clear в этом коде?

Question

Я новичок в CSS. У меня есть Div, Right и Content div. Я хочу, чтобы это выглядело так:

Top     Right

Content

Однако, это проявляется так:

Top Content Right

Я знаю, что мне нужно где-то очистить, но я не уверен, где, потому что мне непонятно, как на самом деле работают очистки, поэтому кто-то может объяснить приведенный ниже html-код о том, где я буду применять очистку и какой тип очистки я выберите (слева, справа или оба). Вот урезанный HTML-код:

<div style="float:left; width:600px; height:100px; 
            border:1px solid black;">Top</div>
<div style="float:right; width:200px; height:800px; 
            border:1px solid red;">Right</div>
<div style="width:500px; height:600px; 
            border:1px solid blue;">Content</div>

Answer 1

Поместите clear в Содержимое <div>:

<div style="float:left; width:600px; height:100px; 
            border:1px solid black;">Top</div>
<div style="float:right; width:200px; height:800px; 
            border:1px solid red;">Right</div>
<div style="width:500px; height:600px; clear: both;
            border:1px solid blue;">Content</div>

Это сдвигает Контент <div> так, чтобы он находился ниже любых плавающих элементов (слева или справа).

Примечание: вам, вероятно, следует использовать CSS-классы или атрибут id для удобства, а не вставку с помощью style.

Answer 2

Хотя это работает не во всех случаях, метод *1002* clearfix WebToolkit помогает устранить большинство из этих проблем.

Использование

<div class="clearfix">
  <div style="float:left;">left</div>
  <div style="float:right;">right</div>
</div>
<div>
  Some block content that doesn't overlap the floats
</div>

Также см. Демоверсию

код

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

Answer 3

Поместите DIV, который очищается сразу после правого div:

<div style="float:left; width:600px; height:100px; 
            border:1px solid black;">Top</div>
<div style="float:right; width:200px; height:800px; 
            border:1px solid red;">Right</div>
<div style="clear:both;"></div>
<div style="width:500px; height:600px; 
            border:1px solid blue;">Content</div>