CSS: Как очистить плавающий объект только на одном уровне, а не влево?

Question

Im не уверен, если im описывает это правильно. Я хочу, чтобы объект среди всех плавающих объектов очищался, но не весь путь влево.

JSfiddle

#parent { 
 
    background: greenyellow; 
 
    width: 500px; 
 
    height: 700px; 
 
    padding: 15px; 
 
} 
 
#parent>div { 
 
    float: left; 
 
} 
 
#object1 { 
 
    width: 40px; 
 
    height: 300px; 
 
    background: blue; 
 
} 
 
#object2 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
} 
 
#object3 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: purple; 
 
}

<div id="parent"> 
 

 
    <div id="object1"> 
 

 

 
    </div> 
 
    <div id="object2"> 
 

 
    </div> 
 
    <div id="object3"> 
 
    </div> 
 

 
</div>

Как и в jsfiddle. Я хочу, чтобы фиолетовая коробка оказалась ниже красной коробки. И я не хочу уменьшать ширину моего родителя. И я не хочу содержать красный и фиолетовый внутри div.

Есть ли способ для этого. Спасибо?

Answer 1

Установить нижний ширина родителю,

#parent {width: 200px;} 

http://jsfiddle.net/db0xacps/1/

Или завернуть правильные элементы, стили будут такими же, как у вас есть.

<div id="parent"> 
    <div id="object1"></div> 
    <div> 
     <div id="object2"></div> 
     <div id="object3"></div> 
    </div> 
</div> 

http://jsfiddle.net/db0xacps/2/

Answer 2

использовать этот стиль в # object3:

clear:left; margin:-200px 0px 0px 40px; 

    #object3 
    { 
     width:100px; 
     height:100px; 
     background:purple; 

     clear:left; margin:-200px 0px 0px 40px; 
    } 

Answer 3

Своего рода clear: left(x-level) не существует. Если вы не хотите изменять ширину оболочки для принудительного перемещения элемента, вы можете изменить внешний вид самого элемента, добавив к margin-right.

#object3 
{ 
    margin-right: 300px; 
}