несколько поплавков с четкими, но правильными выталкиваются вниз левые

Question

поэтому у меня есть этот код:

HTML:

<div class="left">left</div> 
<div class="left">left</div> 
<div class="left">left</div> 
<div class="right">right</div> 
<div class="right">right</div> 
<div class="right">right</div> 

CSS:

.left{ 
    float: left; 
    clear: left; 
    border: 1px solid blue; 
} 
.right{ 
    float: right; 
    clear: right; 
    border: 1px solid red; 
} 

jsfiddle: https://jsfiddle.net/839okvsb/4/

Левые divs - это то место, где я ожидаю, что они будут, но правильные начнутся после того, как div 2 вместо этого начиная сверху.

Почему это и как я могу это исправить? Я абсолютно не понимаю, почему это происходит.

PS: Я не могу содержать левые divs в один гигантский div, мне нужны те divs, разделенные (потому что иногда div1 будет полной шириной, а иногда и нет).

Редактировать: Я не могу их смешивать и, как вы можете видеть здесь: https://jsfiddle.net/839okvsb/5//смешивание все еще не решает проблему.

edit2: Я не могу упаковать их в один большой DIV, потому что мне нужно, чтобы они были в состоянии сделать это: https://jsfiddle.net/839okvsb/8/, когда мне нужно.

Answer 1

Поскольку вы не можете создать макет с двумя столбцами, используя поплавок влево/вправо (даже если вы их очистите), вам нужно иметь такую ​​разметку, иначе вы получите результат, показанный в вашем вопросе , так как это работает с поплавками.

.left{ 
 
    float: left; 
 
    clear: left; 
 
    border: 1px solid blue; 
 
    width: 48%; 
 
} 
 
.right{ 
 
    float: right; 
 
    clear: right; 
 
    width: 48%; 
 
    border: 1px solid red; 
 
}

<div class="left">left 1</div> 
 
<div class="right">right 1</div> 
 
<div class="left">left 2</div> 
 
<div class="right">right 2</div> 
 
<div class="left">left 3</div> 
 
<div class="right">right 3</div>

Или обернуть поплавки

.left{ 
 
    float: left; 
 
    clear: left; 
 
    width: 48%; 
 
} 
 
.right{ 
 
    float: right; 
 
    clear: right; 
 
    width: 48%; 
 
} 
 
.left .left{ 
 
    border: 1px solid blue; 
 
    width: 100%; 
 
} 
 
.right .right{ 
 
    width: 100%; 
 
    border: 1px solid red; 
 
}

<div class="left"> 
 
    <div class="left">left 1</div> 
 
    <div class="left">left 2</div> 
 
    <div class="left">left 3</div> 
 
</div> 
 

 
<div class="right"> 
 
    <div class="right">right 1</div> 
 
    <div class="right">right 2</div> 
 
    <div class="right">right 3</div> 
 
</div>

Обновление на основе редактирования/комментарий

Если левая и их права НЕ обеспечивает всегда слева и справа, например, когда один из них 100% в ширину, вот еще один вариант, где все плавали левый

.left, 
 
.right { 
 
    float: left; 
 
    border: 1px solid blue; 
 
    box-sizing: border-box; 
 
    width: 48%; 
 
    margin-left: 4%; 
 
} 
 
.left:nth-child(1) { 
 
    width: 100%; 
 
    margin-left: 0; 
 
} 
 
.right { 
 
    margin-left: 0; 
 
} 
 
.right{ 
 
    border: 1px solid red; 
 
}

<div class="left">left 1</div> 
 
<div class="right">right 1</div> 
 
<div class="left">left 2</div> 
 
<div class="right">right 2</div> 
 
<div class="left">left 3</div> 
 
<div class="right">right 3</div>