CODEWITHSUNDEEP
csscss-float
Brian Ellis
Brian Ellis

Reputation: 2441

CSS: Clear:left/right/both; VS Float: none;

I checked several questions on the matter both on the site and off but never have seem to have gotten a clear definition.

It seems through experimentation that float: none; removes the element from the float layout position altogether and places the element back into regular document flow.

clear: left/right/both; on the otherhand seems to break the floating of the element but does not place the element back into the regular document flow, rather keeping the element in the float layout position flow.

Is this a correct assumption and can this topic be explained more thoroughly or with a more credible source cited than individual experimentation.

Upvotes: 0

Views: 357

Answers (1)

Moob
Moob

Reputation: 16204

clearing does not change the floating status of an element - it merely defines whether the element is allowed to sit beside another or must wrap underneath.

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.

https://developer.mozilla.org/en-US/docs/Web/CSS/float

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.

https://developer.mozilla.org/en-US/docs/Web/CSS/clear

Here's an example of when you would need to clear an element:
Note how it's the footer (a non-floating element) that needs the clearing applied in this case. 

section {float:left; width:60%; height:200px; background:rgba(255,0,0,.3);}
aside {float:right; width:40%; height:100px; background:rgba(0,255,0,.3);}
footer {/*clear:both;*/ background:rgba(0,0,255,.3);}
<section>Main</section>
<aside>Sidebar</aside>
<footer>Footer</footer>

When Clearing is Not Enough...

So, you've successfully floated your elements and have broken out of 'The Flow' but now you find yourself with a zero-height/collapsing container problem? For that you'll need a clear-fix. Here's an example of the problem and solution:

section {border:1px solid red; padding:10px 5px; clear:both;}
span {display:block; float:left; width:80px; height:80px; margin:0 5px; background:rgba(100,100,100,.3)}

.clearfix {border-color:green;}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
<section>
    <span>1</span><span>2</span><span>3</span><span>4</span>
</section>
<section class="clearfix">
    <span>1</span><span>2</span><span>3</span><span>4</span>
</section>

Upvotes: 2

Related Questions