Не могу найти объяснение данного результата:
Имеется родительский элемент .p в нем три инлайновских дочерних элемента(.p 50%, .c1 25%, .c2 25%), два последних .с1 и .с2 из которых имеют свойство float:right, то есть будут идти друг за другом, если поместятся в строку, все друг к другу впритык. Но если поставить последнему элементу .с2 свойство clear:both, то он сместится под .с1 - логично. Дальше, если сделать так, что у .с2 ширина не 25% и допустим 40%, то .с2 смещается не под .с1, а под элемент .con. Почему, ведь у .с2 ещё есть место до границ элемента .con?
Такое ощущение будто .с2 свойством clear:both снимает всего лишь обтекание, а место резервируется в строчке наряду с элементом .с1
https://jsfiddle.net/v7gonnj9/
.p {
width: 50%;
}
.con {
width: 50%;
height: 100px;
background-color: green;
display: inline-block;
}
.c1 {
width: 25%;
height: 50px;
box-sizing: border-box;
background-color: red;
float: right;
}
.c2 {
width: 40%;
height: 50px;
box-sizing: border-box;
background-color: blue;
float: right;
clear: both;
}
<div class='p'>
<span class='con'></span><span class='c1'></span>
<span class='c2'></span>
</div>