JSFiddle - React, Tailwind, and code Playground

by muffls

HTML

<header>Header</header>
<div>
<div class="content">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
    <br /><span class="info">float:left;</span>
</div>
<div class="menu">
    <a href="#">This</a>  <span class="info">float:right;</span>
</div>
</div>
<footer>Footer kein clear</footer>

<div style="height:50px;"></div>

<header>Header</header>
<div class="wrapper">
<div class="content">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
    <br /><span class="info">float:left;</span>
</div>
<div class="menu">
    <a href="#">This </a><span class="info">float:right;</span>
</div>
</div>
<footer>Footer - Floating mit <span class="info">clear:both;</span> aufgehoben</footer>

CSS

header, footer, .menu, .content {
    padding:10px;
    border: 1px solid green;
}

header {
    font-size:20px;
    margin-bottom:10px;
}

.menu {
    width:28%;
    float:right;
}

.content {
    width:72%;
    float:left;
    height:80px;
}

footer {
    border-color:red;
    margin-top:10px;
}

.wrapper:before, .wrapper:after  {
    display: table;
    content: "";
}

.wrapper:after {
    clear: both;
}

.info {
    color:grey;
}

* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}