How to explain CSS clear property? [duplicate]


Tags: html,css3,css-float,clear,concept

Problem :

This question already has an answer here:

I was trying to understand CSS clear property. I see that it adds a new line and prevents other elements from overlapping. I have concluded it with my personal observations and some readings.

This was something I fiddled with:

.div1 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}
.div2 {
  border: 1px solid red;
  clear: left;
}
<h2>Using clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - remove
  <mark>clear:left</mark> and see the impact</div>

How can you explain this to non-programmers. Say your wife?



Solution :

Lets say we have two rows, where each row has 3 chairs.

Now imagine you are sitting on the chair in the middle of first row.

If you say clear:left, that means you're not allowing anybody to sit to your left, likewise, if you say clear:right, you are not allowing anybody to sit to your right.

And if you say clear:both you are not allowing anybody to sit on either side and to choose the next row of chairs!


    CSS Howto..

    How to use CSS to create an image overlay effect?

    CSS - how do I float another div over another without overlapping

    How to export only the used css from a site?

    how can I apply css based on parent div class

    How to edit the CSS of CarrierWave's 'Choose file' button and “No file chosen” text? (Rails4)

    How to center this on screen

    How to fix this flexbox alignment issue due to unsupported 'flex-grow' in IE10?

    How to define specific CSS rules for IE9 alone?

    How to get rid of text form borders in Chrome and Firefox?

    How to set z-index in css?

    How to avoid div width increase on hover

    How to import a css file in a react component?

    how to create the scrolling Menu in css?

    How to get the root directory of wordpress in css

    how to write this code as link click animation

    How to keep long image within background cover at any screen size in CSS?

    CSS - how to make the div display as shorter list box?

    How to force or bring vertical scroll bar to front in html css

    How to style OL number points in CSS [duplicate]

    How to use text-overflow properly to format text?

    jquery style sheet switcher - how to effect only theme css?

    How to display html with css stylesheet in TextView?

    Is it possible to show webpage in a window from my Chrome extension, only using JS, HTML and CSS?

    How can I use JQ to pick out a parent whose child is hr.strong?

    How do I override a (css) metaclass property using a GreaseMonkey script?

    How do I apply css code for svg in google api charts

    CSS Overflow, the scroll bar appears at the bottom, how can I get a scroll bar at the top?

    How to Remove the White Space below the Footer in Wordpress Site using CSS

    jQuery/CSS - How to style the first occurrence of an element inside of another element?

    How to change CSS with jquery?