JSFiddle - React, Tailwind, and code Playground

by Naeel Maqsudov

HTML

<!--выхватывание элемента из потока-->
<h3>1) есть строчный контент и высота > 0 (блочный контент «выдернут» с помощью float)</h3>
<div class="parent">строчный контент
    <div class="child left">qwer</div>
    <div class="child right">qwer</div>
</div>
<h3>2) есть блочный контент и высота > 0</h3>
<div class="parent">
    <div class="child">qwer</div>
    <div class="child">qwer</div>
</div>
<h3>3) никакого контента не осталось, высота = 0</h3>
<div class="parent">
    <div class="child left">qwer</div>
    <div class="child right">qwer</div>
</div>

CSS

div{
    border:1px solid red;
}
.child{
    border-color: blue;
}
.left{
    float: left;
}
.right{
    float:right;
}