Как спрятать с опцией propper?

Question

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

Например:

<div> 
<div style="length:150px;">my info1</div> 
<div style="length:50px;">my Info2</div> 
</div> 

Взгляните на этот пример

.topic { 
 
    width: 500px; 
 
    background-color: green; 
 
    display: block; 
 
} 
 
.topic .tInfo { 
 
    float: left; 
 
    width: 460px; 
 
    background-color: blue; 
 
} 
 
.topic .tName { 
 
    width: 460px; 
 
    background-color: brown; 
 
} 
 
.topic .tTime { 
 
    width: 460px; 
 
    background-color: lime; 
 
} 
 
.topic .tUImgLnk { 
 
    width: 40px; 
 
    height: 40px; 
 
    float: left; 
 
    position: relative; 
 
    background: red; 
 
} 
 
.topic .tUImgLnk .tUImg { 
 
    margin: 0px auto; 
 
    display: block; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translateY(-50%) translateX(-50%); 
 
    position: absolute; 
 
}

<div class="topic" data-reactid=".24rl768raww.$0"> 
 
    <div class="tUImgLnk" data-reactid=".24rl768raww.$0.0"> 
 
    <a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.0.0"> 
 
     <img class="tUImg" src="" data-reactid=".24rl768raww.$0.0.0.0"> 
 
    </a> 
 
    </div> 
 
    <div class="tInfo" data-reactid=".24rl768raww.$0.1"> 
 
    <div class="tName" data-reactid=".24rl768raww.$0.1.0"><a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.1.0.0">Carl</a> 
 
    </div> 
 
    <div class="tTime" data-reactid=".24rl768raww.$0.1.1"><span data-reactid=".24rl768raww.$0.1.1.0">2015-02-20 18:43:03</span> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="topic" data-reactid=".24rl768raww.$0"> 
 
    <div class="tUImgLnk" data-reactid=".24rl768raww.$0.0"> 
 
    <a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.0.0"> 
 
     <img class="tUImg" src="" data-reactid=".24rl768raww.$0.0.0.0"> 
 
    </a> 
 
    </div> 
 
    <div class="tInfo" data-reactid=".24rl768raww.$0.1"> 
 
    <div class="tName" data-reactid=".24rl768raww.$0.1.0"><a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.1.0.0">Carl</a> 
 
    </div> 
 
    <div class="tTime" data-reactid=".24rl768raww.$0.1.1"><span data-reactid=".24rl768raww.$0.1.1.0">2015-02-20 18:43:03</span> 
 
    </div> 
 
    </div> 
 
</div>

я использовал <br style="clear:both"/> в конце каждой коробки обертки, но это действительно лучший путь?

Answer 1

Это Происходило, потому что вы не имеете обертку, а элементы liberaly плавающей;

в приведенном ниже фрагменте кода я обернул свои элементы в строках с article селектором и очистил поплавки:

.topic { 
 
    width: 500px; 
 
    background-color: green; 
 
    display: block; 
 
} 
 
.topic .tInfo { 
 
    float: left; 
 
    width: 460px; 
 
    background-color: blue; 
 
} 
 
.topic .tName { 
 
    width: 460px; 
 
    background-color: brown; 
 
} 
 
.topic .tTime { 
 
    width: 460px; 
 
    background-color: lime; 
 
} 
 
.topic .tUImgLnk { 
 
    width: 40px; 
 
    height: 40px; 
 
    float: left; 
 
    position: relative; 
 
    background: red; 
 
} 
 
.topic .tUImgLnk .tUImg { 
 
    margin: 0px auto; 
 
    display: block; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translateY(-50%) translateX(-50%); 
 
    position: absolute; 
 
} 
 
article:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
}

<article> 
 
<div class="topic" data-reactid=".24rl768raww.$0"> 
 
    <div class="tUImgLnk" data-reactid=".24rl768raww.$0.0"> 
 
    <a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.0.0"> 
 
     <img class="tUImg" src="" data-reactid=".24rl768raww.$0.0.0.0"> 
 
    </a> 
 
    </div> 
 
    <div class="tInfo" data-reactid=".24rl768raww.$0.1"> 
 
    <div class="tName" data-reactid=".24rl768raww.$0.1.0"><a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.1.0.0">Carl</a> 
 
    </div> 
 
    <div class="tTime" data-reactid=".24rl768raww.$0.1.1"><span data-reactid=".24rl768raww.$0.1.1.0">2015-02-20 18:43:03</span> 
 
    </div> 
 
    </div> 
 
</div> 
 
<article> 
 
</article> 
 
<div class="topic" data-reactid=".24rl768raww.$0"> 
 
    <div class="tUImgLnk" data-reactid=".24rl768raww.$0.0"> 
 
    <a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.0.0"> 
 
     <img class="tUImg" src="" data-reactid=".24rl768raww.$0.0.0.0"> 
 
    </a> 
 
    </div> 
 
    <div class="tInfo" data-reactid=".24rl768raww.$0.1"> 
 
    <div class="tName" data-reactid=".24rl768raww.$0.1.0"><a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.1.0.0">Carl</a> 
 
    </div> 
 
    <div class="tTime" data-reactid=".24rl768raww.$0.1.1"><span data-reactid=".24rl768raww.$0.1.1.0">2015-02-20 18:43:03</span> 
 
    </div> 
 
    </div> 
 
</div> 
 
</article>