How did the overflow property with the class of hidden cause the float to be cleared?

Question

Hi guys a lot of the principles in this video were very unclear. I'm not any better at understanding floats and clear.

For starters a few mins before Guil explained the overflow property and what it's commonly used for-- to clear text that overflows from it's containing div--but then he used that same property with the class of hidden to clear a float. Can anyone explain how that works?

Also I really didn't get why adding the br tag inside the div then clearing the br in the CSS caused the floats to be cleared. Can you expound on that please?

The only display properties we touched on so far was the none, inline, inline-block, and block. He mentioned the audit. What does it do? is the hidden and audit the same?

The Nicolas Gallagher fix uses an empty string. I still have no idea what an empty string is commonly used for, or how or when to use it.

Finally when wrapping the text around the image, in order to get it to go flushed against the image we needed to add a width to the paragraph first. Why did we need to give it an explicit width before? A lot of things were left unexplained or the explanation was very unclear. There are a lot more, but I intend to search the internet to see if I can figure them out on my own. These are the ones I figured would be harder to find.

Thanks in advance guys.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Floats</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="badge">
        <img class="badge-icon" src="flag.png">
        <h4>Build a Simple Website</h4>
        <p class="badge-desc">Smells Like Bakin' is a cupcake company in need of a website. This project will walk us through the basics of HTML and CSS from the very beginning. HTML and CSS are the structural and presentational building blocks of every website and will serve as the foundation for any web project.</p>
    </div>
</body>

style.css

/* Complete the challenge by writing CSS below */







/* clearfix styles */

.group:before,
.group:after {
  display: table;
  content: "";
}
.group:after {
  clear: both;
}

Answer 1 · 2014-12-08T16:44:20Z

December 8, 2014 4:44pm

Hey Samuel,

Overflow:

The overflow property is not specifically designed for text. It simply tells the browser what to do if a child element is larger than its parent element. The value of hidden causes any child outside of the parent element to disappear. Read more about it here: http://www.w3schools.com/cssref/pr_pos_overflow.asp

BR / Clear

BR creates a line break in the html. Guil chose this tag to use because it would not cause a significant visual effect, and it would create a new child within div that he could use to style the child elements of the div. He could have done the same thing by creating a class:

<div>
   <img class="floats" src="img/mycoolimg.png">
   <p class="floats">Your paragraph here.</p>
</div>

.floats {
  clear: left;
}

The clear property is specifically designed to prevent elements from floating. Read more about it here: http://www.w3schools.com/cssref/pr_class_clear.asp

The clear fix uses an empty string in order to create a new, modifiable class that doesn't take up space. Once the content is there, we can use it to style the container without having to add br tags or classes to each child element.

As for your last question, the paragraph needs a defined width to keep it from taking up its parent div. Without a specific width style, a child element will take up as much horizontal space within the parent that it needs. The width measurement could have used relative units.

Welcome to the Treehouse Community

Looking to learn something new?

SAMUEL LAWRENCE

SAMUEL LAWRENCE

How did the overflow property with the class of hidden cause the float to be cleared?

1 Answer

Michael De Marre

Michael De Marre

SAMUEL LAWRENCE

SAMUEL LAWRENCE