Hi, this is my first post. I was experimenting with floats, and wanted to understand the “clearfix hack”, the one in which you use .element::after{}. I didn’t understand its purpose. On the net I read that, because a div adapts its height to its content, it would collapse when only float elements were inside of it. So, I created a .red div (with red background and borders) and put three floating columns inside (width of 33.33%, backgrounds of green, blue and yellow, and filled with some text). After that, I created a new .orange div after this .red div and put an anchor tag. The div has a background color of orange and the anchor a background of saddlebrown, just to see where is everything.
As far as I could find on the internet, without some .red::after{} style with the properties of content=“”; display: table; and clear: both;, there’s going to be trouble. Because the floated elements are taken out of the flow of the page, and therefore other elements will slip underneath them, as if they didn’t exist.
I can obviously tell that the .orange div went underneath the floating elements of the .red div, because with my explorer (Chrome) I see that the orange background goes behind them and almost reaches the .red collapsed borders. But then, these floating elements don’t go over the anchor element. It just goes down the all the way below them and fits nicely.
This is what makes me wonder, “why do I need the clearflix?”. Sure, I know that the content:“”; will create an empty string, which will be displayed as a table to have a dimension and, after being cleared on both sides, will go down just after the last float element. I know this will enable me to place borders correctly and will correct this error in which the .orange background went underneath something. But what about the content? I’ve seen dozens of examples of the clearfix hack, in which they said it was to stop the overflown content to overlap other elements. Why does the anchor tag react that way? From a logical point of view, I understand it should slip underneath the columns and the whole .orange element should have a height of the anchor plus any padding or margin.
I’m leaving my code here.
Thank you in advance!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.red {
background-color: red;
border: 5px solid purple;
}
.green {
background-color: green;
width:33.33%;
float:left;
}
.blue {
background-color: blue;
width:33.33%;
float:left;
}
.yellow {
background-color: yellow;
width:33.33%;
float:left;
}
.orange {
background-color: orange;
}
a {
background-color: saddlebrown;
clear:none;
}
</style>
</head>
<body>
<div class="red">
<div class="green">
<h2>Column 1</h2>
<p>First column inside first div</p></div>
<div class="blue">
<h2>Column 2</h2>
<p>Second column inside first div</p></div>
<div class="yellow">
<h2>Column 3</h2>
<p>Third column inside first div</p></div>
</div>
<div class="orange">
<a>Content inside second div. Shouldn't it slip underneath the floated elements of the first div?<br>
It's not doing it, so why should I bother using the clearfix?</a>
</div>
</body>
</html>
