<style>
div.test {
inline-size: 50px;
block-size: 100px;
background-color: red;
}
div.float {
float: left;
block-size: 50px;
inline-size: 50px;
background-color: blue;
}
div.clear {
clear: left;
}
div.green {
background-color: green;
block-size: 25px;
}
div.lr {
-webkit-writing-mode: vertical-lr;
}
div.rl {
-webkit-writing-mode: vertical-rl;
}
</style>
<div class="test lr">
<div class="float"></div>
<div class="clear"></div>
<div class="green"></div>
<div class="green"></div>
</div>
<div class="test lr">
<div class="float"></div>
<div class="clear green"></div>
<div class="green"></div>
</div>
<div class="test rl">
<div class="float"></div>
<div class="clear"></div>
<div class="green"></div>
<div class="green"></div>
</div>
<div class="test rl">
<div class="float"></div>
<div class="clear green"></div>
<div class="green"></div>
</div>