Внутренний текст не float div позиционируется относительно предыдущего float div

Question

Мои вопросы, почему в следующем HTML/CSS коде «Зеленый» текст находится за пределами зеленого поля. Он расположен горизонтально, так как он должен находиться внутри зеленой коробки, но вертикально он находится ниже красной рамки. А почему синяя коробка расположена вертикально ниже зеленом поле, не ниже красного:

HTML:

<div class="red">Red</div> 
<div class="green">Green</div> 
<div class="blue">Blue</div> 

CSS:

.red { 
    width: 25%; 
    height: 50px; 
    float: left; 
    border-color: red; 
    border-width: 1px; 
    border-style: solid; 
    color: red; 
} 

.green { 
    width: 18%; 
    height: 40px; 
    border-color: green; 
    border-width: 1px; 
    border-style: solid; 
    text-align: center; 
    color: green; 
} 

.blue { 
    width: 20%; 
    height: 50px; 
    float: left; 
    border-color: blue; 
    border-width: 1px; 
    border-style: solid; 
    color: blue; 
} 

https://jsfiddle.net/3tk7Lwbj/1/

As Я понимаю, что плавают описание, красные и синие квадраты берутся из нормального потока, поэтому зеленый квадрат следует игнорировать, почему подсчитывает их положение.

Answer 1

Решение, данное @vivekkupadhyay, является правильным. Когда вы применяете свойство float css к любому элементу уровня блока, он получает float на экране, не занимая места на странице. Таким образом, любой элемент, добавленный между ними или после него, добавляется за ними.

Теперь, о четкой собственности. Что оно делает. Если вы добавите свойство clear: both, то обе стороны (влево/вправо) этого элемента станут ясными, и на странице появится полное свободное пространство. И если использовать только четкие: влево (в соответствии с требованием), он очищает пространство слева и использует полное пространство.

В случае с .green классом, когда вы добавили свойство clear: слева, тогда он очистит левую сторону, но с этой стороны обнаружил элемент красный, чтобы он перемещался по новой строке с полным размером на экране и из-за полного размера, .gree, .blue добавляется ниже.

Надеюсь, что у меня есть достаточно подробностей, чтобы убрать ваш вопрос.