CSS clear

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="CSS clear, clearance, position, beside, above, below, flow control, float, stylesheets"> <meta name="Description" content="CSS clear - CSS property for controlling flow when using float."> <link rel="canonical" href="https://www.quackit.com/css/properties/css_clear.cfm"> <title>CSS clear</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">CSS clear</h1> <div class="ad ad-top">  <div data-fuse="23059883623"></div> </div> <script src="/common/js/codemirror/lib/codemirror.js"></script> <script src="/common/js/codemirror/mode/css/css.js"></script> <div class="code-only"> <textarea id="example1" autocomplete="off" spellcheck="false"><!doctype html>
<title>Example</title>
<style>
div {
 background: green;
 color: white;
 width: 100px;
 padding: 10px;
 margin: 5px;
 }
.right {
 float: right;
 }
.left {
 float: left;
 }
.clear {
 clear: both;
 background: blue;
 }
</style>
<div class="left">.left</div>
<div class="right">.right</div>
<div class="clear">.clear</div>
<div class="right">.right</div></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/css/properties/css_clear" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode1 = CodeMirror.fromTextArea(document.getElementById("example1"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p class="lead">The CSS <code>clear</code> property is used to for control flow when using the <a href="/css/properties/css_float.cfm"><code>float</code></a> property. You can specify whether to keep one or both sides of an element "clear" (i.e. no elements can appear on the side that is clear).</p> <p>Specifically, the <code>clear</code> property indicates which sides of an element's box(es) may <em>not</em> be adjacent to an earlier floating box. In other words, it specifies whether or not an element can be positioned next to floating elements that precede it or it must be moved down (cleared) below them.</p> <div class="ad">  <div data-fuse="23059883629"></div> </div> <h2>Syntax</h2> <script src="/common/js/codemirror/mode/text/css/text/css.js"></script> <div class="code-only"> <textarea id="example2" autocomplete="off" spellcheck="false">clear: 	none | left | right | both</textarea> </div> <script> var exampleCode2 = CodeMirror.fromTextArea(document.getElementById("example2"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Possible Values</h2> <dl> <dt><dfn><code>none</code></dfn></dt> <dd>Specifies no clearance. There's no constraint on the box's position with respect to floats.</dd> <dt><dfn><code>left</code></dfn></dt> <dd>Specifies that the element is moved down to clear past left floats. The top border edge of the box is below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document. </dd> <dt><dfn><code>right</code></dfn></dt> <dd>Specifies that the element is moved down to clear past right floats. The top border edge of the box is below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.</dd> <dt><dfn><code>both</code></dfn></dt> <dd>Specifies that the element is moved down to clear past both left and right floats. The top border edge of the box is below the bottom outer edge of both any right-floating and left-floating boxes that resulted from elements earlier in the source document.</dd> </dl> <h3>Logical Values</h3> <p>The following values have been <a href="https://drafts.csswg.org/css-logical-props/#float-clear">proposed</a> for the <code>clear</code> property in CSS3:</p> <ul> <li><code>inline-start</code></li> <li><code>inline-end</code></li> </ul> <p>In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value: </p> <dl> <dt><code>initial</code></dt> <dd>Represents the value specified as the property's initial value.</dd> <dt><code>inherit</code></dt> <dd>Represents the computed value of the property on the element's parent.</dd> <dt><code>unset</code></dt> <dd>This value acts as either <code>inherit</code> or <code>initial</code>, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.</dd> </dl> <h2>General Information</h2> <div class="specifications"> <dl> <dt>Initial Value</dt> <dd><code>none</code></dd> <dt>Applies To</dt> <dd>Block-level elements</dd> <dt>Inherited?</dt> <dd>No</dd> <dt>Media</dt> <dd>Visual</dd> </dl> </div> <h2>Example Code</h2> <div class="code-only"> <textarea id="example3" autocomplete="off" spellcheck="false">div {
 clear: both;
}</textarea> </div> <script> var exampleCode3 = CodeMirror.fromTextArea(document.getElementById("example3"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Official Specifications</h2> <ul> <li><a href="https://drafts.csswg.org/css-logical-props/#float-clear">CSS Logical Properties Level 1</a> (Editor's Draft)</li> <li><a href="https://www.w3.org/TR/CSS21/visuren.html#flow-control">CSS Level 2.1</a> (W3C Recommendation 07 June 2011)</li> <li><a href="https://www.w3.org/TR/CSS1/#clear">CSS Level 1</a> (W3C Recommendation 17 Dec 1996)</li> </ul> </article> <div class="sidebar"> <nav> <ul> <li> <h3><a href="/css/properties/">CSS Properties</a></h3> <ul> <li><a href="/css/css3/properties/css_animation.cfm">animation</a></li> <li><a href="/css/properties/css_background.cfm">background</a></li> <li><a href="/css/css3/properties/css_bleed.cfm">bleed</a></li> <li><a href="/css/css3/properties/css_border-radius.cfm">border-radius</a></li> <li><a href="/css/properties/css_border.cfm">border</a></li> <li><a href="/css/css3/properties/css_box-shadow.cfm">box-shadow</a></li> <li><a href="/css/css3/properties/css_box-sizing.cfm">box-sizing</a></li> <li><a href="/css/properties/css_clear.cfm">clear</a></li> <li><a href="/css/properties/css_clip.cfm">clip</a></li> <li><a href="/css/properties/css_color.cfm">color</a></li> <li><a href="/css/css3/properties/css_columns.cfm">columns</a></li> <li><a href="/css/properties/css_content.cfm">content</a></li> <li><a href="/css/properties/css_counter-increment.cfm">counter-increment</a></li> <li><a href="/css/properties/css_cue.cfm">cue</a></li> <li><a href="/css/properties/css_cursor.cfm">cursor</a></li> <li><a href="/css/properties/css_display.cfm">display</a></li> <li><a href="/css/css3/properties/css_filter.cfm">filter</a></li> <li><a href="/css/css3/properties/css_flex.cfm">flex</a></li> <li><a href="/css/properties/css_float.cfm">float</a></li> <li><a href="/css/properties/css_font-family.cfm">font-family</a></li> <li><a href="/css/properties/css_font-size.cfm">font-size</a></li> <li><a href="/css/properties/css_font.cfm">font</a></li> <li><a href="/css/properties/css_height.cfm">height</a></li> <li><a href="/css/properties/css_left.cfm">left</a></li> <li><a href="/css/properties/css_list-style.cfm">list-style</a></li> <li><a href="/css/properties/css_margin.cfm">margin</a></li> <li><a href="/css/css3/properties/css_mix-blend-mode.cfm">mix-blend-mode</a></li> <li><a href="/css/css3/properties/css_opacity.cfm">opacity</a></li> <li><a href="/css/properties/css_outline.cfm">outline</a></li> <li><a href="/css/css3/properties/css_overflow.cfm">overflow</a></li> <li><a href="/css/properties/css_padding.cfm">padding</a></li> <li><a href="/css/properties/css_page.cfm">page</a></li> <li><a href="/css/properties/css_pause.cfm">pause</a></li> <li><a href="/css/css3/properties/css_perspective.cfm">perspective</a></li> <li><a href="/css/properties/css_position.cfm">position</a></li> <li><a href="/css/css3/properties/css_rest.cfm">rest</a></li> <li><a href="/css/properties/css_right.cfm">right</a></li> <li><a href="/css/properties/css_text-align.cfm">text-align</a></li> <li><a href="/css/css3/properties/css_text-decoration.cfm">text-decoration</a></li> <li><a href="/css/properties/css_text-shadow.cfm">text-shadow</a></li> <li><a href="/css/properties/css_top.cfm">top</a></li> <li><a href="/css/css3/properties/css_transform.cfm">transform</a></li> <li><a href="/css/css3/properties/css_transition.cfm">transition</a></li> <li><a href="/css/properties/css_vertical-align.cfm">vertical-align</a></li> <li><a href="/css/properties/css_visibility.cfm">visibility</a></li> <li><a href="/css/properties/css_width.cfm">width</a></li> <li><a href="/css/css3/properties/css_word-wrap.cfm">word-wrap</a></li> <li><a href="/css/properties/css_z-index.cfm">z-index</a></li> <li><a href="/css/properties/">All Properties <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> </li> <li> <h3><a href="/css/reference/">CSS Reference</a></h3> <ul> <li><a href="/css/examples/" title="Copy & paste code examples.">CSS Examples</a></li> <li><a href="/css/properties/" title="All CSS properties listed alphabetically.">CSS Properties</a></li> <li><a href="/css/functions/" title="All CSS functions listed alphabetically.">CSS Functions</a></li> <li><a href="/css/data_types/" title="">CSS Data Types</a></li> <li><a href="/css/at-rules/" title="">CSS @-Rules</a></li> <li><a href="/css/selectors/" title="All CSS selectors.">CSS Selectors</a></li> <li><a href="/css/css3/animations/animatable_properties/" title="Properties that support CSS animations.">CSS Animatable Properties</a></li> <li><a href="/css/color/" title="Full CSS color reference, includes color picker, charts, generators, and more.">CSS Color</a></li> <li><a href="/css/css_color_codes.cfm" title="">CSS Color Codes</a></li> <li><a href="/css/tutorial/" title="">CSS Tutorial</a></li> <li><a href="/css/flexbox/tutorial/" title="">Flexbox Tutorial</a></li> <li><a href="/css/grid/tutorial/" title="">Grid Tutorial</a></li> <li><a href="/css/css_media_types.cfm" title="Use CSS to apply a separate style depending on the media type that is displaying your web page">CSS Media Types</a></li> <li><a href="/css/css_media_features.cfm" title="Use CSS to apply a separate style depending on the media features available in the output device">CSS Media Features</a></li> <li><a href="/bootstrap/tutorial/" title="Bootstrap is a free and open-source framework for creating websites and web applications.">Bootstrap Tutorial</a></li> <li><a href="/sass/tutorial/" title="Sass is a CSS preprocessor to help create maintainable style sheets.">Sass Tutorial</a></li> </ul> </li> </ul> </nav> <div class="ad ad-left">  <div data-fuse="23059511712"></div> </div> </div> <div class="ads"> <div class="ad ad-right">  <div data-fuse="23059883626"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2024 Quackit.com  </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>

CINXE.COM

CSS clear