floating elements are outside of containing blocks?
I'm a beginner in HTML/CSS, just some questions on floating elements, below is the code
section {
border: 1px solid blue;
}
div {
margin: 5px;
width: 200px;
height: 50px;
}
.left {
float: left;
background: pink;
}
.left_second {
position:relative;
background: blue;
}
.right {
float: right;
background: cyan;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device_width,initial-scale=1.0">
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="makeup.css">
</head>
<body>
<section>
<div class="left">1</div>
<div class="left_second">2</div>
<div class="right">3</div>
</section>
</body>
</html>so my questions are:
It is said that floating element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning). But what does "still remaining a part of the flow" actually mean? As we can see that second div overlaps the first div, which means that the first div is not part of flow anymore? the only thing can make it "still remaining a part of the flow" is to set the
float:lefton the second div, then the second is on the right of the first div, which seems like the first div does exist in the flow, is my understanding correct?Why the thrid div is outside of the containing block? why it is not inside the containing block just like first and second divs?
It remains a part of the flow because text still wrap around float thus they are still considered a part of the flow unlike position:absolute elements that will no more affect the flow.
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).ref
To answer your question, let's add the properties step by step.
Intitially we have this:
section {
border: 1px solid blue;
}
div {
margin: 5px;
width: 200px;
height: 50px;
}
.left {
/*float: left;*/
background: pink;
}
.left_second {
position:relative;
background: blue;
}
.right {
/*float: right;*/
background: cyan;
}<section>
<div class="left">1</div>
<div class="left_second">2</div>
<div class="right">3</div>
</section>No float element, each div taking a row and all of them inside the border of the section. Let's float the first one and make the blue background a bit transparent and remove the last div.
section {
border: 1px solid blue;
}
div {
margin: 5px;
width: 200px;
height: 50px;
}
.left {
float: left;
background: pink;
}
.left_second {
position:relative;
background: rgba(0,0,255,0.4);
}
.right {
/*float: right;*/
background: cyan;
}<section>
<div class="left">1</div>
<div class="left_second">2</div>
<!--<div class="right">3</div>-->
</section>As you can see the blue div is completely overlapping the float element and the text of the blue div is outside. Here you facing an oveflow issue. Let's increase the width of the blue box to better see:
section {
border: 1px solid blue;
}
div {
margin: 5px;
width: 200px;
height: 50px;
}
.left {
float: left;
background: pink;
}
.left_second {
position:relative;
width:300px;
background: rgba(0,0,255,0.4);
}
.right {
/*float: right;*/
background: cyan;
}<section>
<div class="left">1</div>
<div class="left_second">2</div>
<!--<div class="right">3</div>-->
</section>As you can see, the text (2) start after the float element and don't overlap it because text wrap around float element unlike block element. In other words, the blue div will start on the top of the float element but not its content and if the size is reduced the text will get pushed to the next line and will overflow:
section {
border: 1px solid blue;
}
div {
margin: 5px;
width: 200px;
height: 50px;
}
.left {
float: left;
background: pink;
}
.left_second {
position:relative;
width:300px;
background: rgba(0,0,255,0.4);
transition:1s;
}
.left_second:hover {
width:200px;
}
.right {
/*float: right;*/
background: cyan;
}<section>
<div class="left">1</div>
<div class="left_second">2 (hover me)</div>
<!--<div class="right">3</div>-->
</section>You may also notice that only the blue div is surrounded by the blue border of the section because its the only non floated element and since it overlap the pink this one will necessarly be there too. If you remove the blue div you see that the pink one is outside:
section {
border: 1px solid blue;
}
div {
margin: 5px;
width: 200px;
height: 50px;
}
.left {
float: left;
background: pink;
}
.left_second {
position:relative;
width:300px;
background: rgba(0,0,255,0.4);
transition:1s;
}
.left_second:hover {
width:200px;
}
.right {
/*float: right;*/
background: cyan;
}<section>
<div class="left">1</div>
<!--<div class="left_second">2</div> -->
<!--<div class="right">3</div>-->
</section>Now if we re-add the third div it will start at the bottom of the blue div and inside the section:
section {
border: 1px solid blue;
}
div {
margin: 5px;
width: 200px;
height: 50px;
}
.left {
float: left;
background: pink;
}
.left_second {
position:relative;
background: rgba(0,0,255,0.4);
}
.right {
/*float: right;*/
background: cyan;
}<section>
<div class="left">1</div>
<div class="left_second">2</div>
<div class="right">3</div>
</section>And if you float it to the right, it will be place on the right and outside the section:
section {
border: 1px solid blue;
}
div {
margin: 5px;
width: 200px;
height: 50px;
}
.left {
float: left;
background: pink;
}
.left_second {
position:relative;
background: rgba(0,0,255,0.4);
}
.right {
float: right;
background: cyan;
}<section>
<div class="left">1</div>
<div class="left_second">2</div>
<div class="right">3</div>
</section>That's why we need to clear float to avoid the overlap effect and the outside effect:
section {
border: 1px solid blue;
overflow:hidden; /*make the float inside*/
}
div {
margin: 5px;
width: 200px;
height: 50px;
}
.left {
float: left;
background: pink;
}
.left_second {
position:relative;
clear:left; /*clear left float*/
background: rgba(0,0,255,0.4);
}
.right {
float: right;
background: cyan;
}<section>
<div class="left">1</div>
<div class="left_second">2</div>
<div class="right">3</div>
</section>