mirror of
https://github.com/GabsPuNs/Project-Zenith-Main.git
synced 2026-07-17 05:20:39 +00:00
49 lines
1.3 KiB
Plaintext
49 lines
1.3 KiB
Plaintext
<rml>
|
|
<head>
|
|
<title>Floats: overflow</title>
|
|
<link type="text/rcss" href="../style.rcss"/>
|
|
<link rel="help" href="https://w3c.github.io/csswg-drafts/css2/#root-height" />
|
|
<meta name="Description" content="Height of block formatting context roots with floated boxes inside." />
|
|
<style>
|
|
body {
|
|
background: #ddd;
|
|
color: #444;
|
|
}
|
|
#content {
|
|
width: 200dp;
|
|
margin: 0 auto;
|
|
}
|
|
.box {
|
|
background-color: #cce;
|
|
border: 5dp #77b;
|
|
}
|
|
.float {
|
|
float: left;
|
|
background-color: #ddda;
|
|
border: 1dp #333;
|
|
width: 200dp;
|
|
height: 130dp;
|
|
margin: 5dp;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="box">
|
|
<div class="float">float: left</div>
|
|
<p>The float to the left should extend past the background of the containing '.box' element.</p>
|
|
</div>
|
|
<hr/>
|
|
<div class="box" style="overflow: auto">
|
|
<div class="float">float: left</div>
|
|
<p>Using 'overflow: auto' on the containing '.box' element. This should establish a new block formatting context (thereby resolving all floats) so that the background wraps around the entire float.</p>
|
|
</div>
|
|
<hr/>
|
|
<div class="box" style="display: flow-root">
|
|
<div class="float">float: left</div>
|
|
<p>Using 'display: flow-root' on the containing '.box' element. This also establishes a new block formatting context, and should be equivalent to the previous box.</p>
|
|
</div>
|
|
<handle size_target="#document"/>
|
|
</body>
|
|
</rml>
|