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..

    CSS how to select nav and li tags but exclude specified class?

    jQuery Tooltip - How To Declare 2 Options

    How to set font “ Balzano” to the text in enclosed in

    on my website?

    Taking var with JS prompt - how can I make it through HTML form?

    How to resize a canvas without anti-aliasing?

    How do I set a block of text to drop to a new line all at once?

    How to center a text nav bar with CSS

    How does localStorage act in Javascript? [closed]

    How to put an image in div with CSS?

    CSS: how to make two sections at the same line?

    How do you center a line-wrapped

    How to make like this gradient sun effect using CSS?

    How do I display the first image from each div with .className?

    How do I “smarten” my HTML/CSS tables so text fits to one line (cleverly)

    How to center text from following element under an image

    How to apply the grayscale jquery plugin to a background image?

    How to zoom content to screen width

    How to align
  • to the top when higher items are hidden via CSS
  • how to stop css/jquery rotation

    How to make recessed button in CSS

    How to change css using jquery in a php loop

    How to get a gradient background for table rows with JSF and CSS?

    How to make whole table cell clickable but vertical align text inside it - CSS

    How remove striped rows in JavaFX 8 TableView

    How to have margins not offset my grid

    How can I change input type of Yii CJuiAutoComplete?

    How to make css jquery autofit navigation?

    How can I hide a style element in html

    How to stop a hovered list item's text from changing back to default when hovering over subnav

    how to set primefaces datatable columns padding with CSS padding