CSS Float Question (Strange behaviors found)-CodePudding

Dears,

Below is my simple float program and I also attach a picture of the result. My question is: When the width in class "two" is 300px, the div 2 is moved next to the floated div 1, this is also my expectation. However, when i changed the width in class "two" from 300px to 200px, div 2 is kept under div 1, and div 3 is moved to overlap with div 2 (see the attached picture) Why?

<html>
<head>
<style>
.one{
    background: yellow;
    width: 200px;
    height: 50px;
    text-align: center; 
    box-shadow: inset 0 0 10px #000;
    Float: left;
    }

.two {
    background: rgb(55, 0, 255);
    width: 300px;
    height: 50px;
    text-align: center; 
    box-shadow: inset 0 0 10px #000;  
  }

.three {
    background: rgb(255, 0, 76);
    width: 200px;
    height: 50px;
    text-align: center; 
    box-shadow: inset 0 0 10px #000;
   }
 </style>
 </head>
 <body>
    <div class = "one">1</div>
    <div class = "two">2</div>
    <div class = "three">3</div>
 </body>
 </html>

CodePudding user response：

Alright I think I figured it out. The problem lies in the fact that it just looks like as if the second div is below the first. It actually properly overlaps the first div and just leaves the text behind. You can see this if you add opacity or remove the background-color of the first div.

You can add display: flow-root to your second (and third) div to fix this if needed or use 'float: left' on all of them as suggested.

<html>
<head>
 </head>
 <body>
    <div class = "one">1</div>
    <div class = "two">22222222</div>
    <div class = "three">3</div>
 </body>
 </html>

.one{
    background: transparent;
    width: 200px;
    height: 50px;
    text-align: center;
    box-shadow: inset 0 0 10px #000;
    float: left;
    }

.two {
    background: rgb(55, 0, 255);
    width: 200px;
    height: 50px;
    text-align: center;
    box-shadow: inset 0 0 10px #000;
 }

.three {
    background: rgb(255, 0, 76);
    width: 200px;
    height: 50px;
    text-align: center;
    box-shadow: inset 0 0 10px #000;
    }

CodePudding user response：

If you add this style to your blue box;

.two {
  border: 10px solid #0ff;
}

You can see blue box is already under the yellow box. The only thing that is absurd here is; blue box text alignment centered only on the rendered area of the blue box.

CodePudding user response：

I think I understand the problem. Because you have a Float: left attribute set to class "one", that makes div 2 go under div 1, but since div 2 is wider than div 1, you can see it on the right. Actually, on my computer, you can still see some blue underneath the yellow. The reason being that because these classes are being used in "div" elements, "div" automatically adds a line-break after where it's used, so even though div 1 and div 2 are the same height, div 2 will peak out a little under div 1 because of that extra line.

When I changed class "two" to 200px width, I am still able to see some blue between the yellow and red rectangles. But it probably gives the illusion of overlapping because of the Float attribute that you're using. If you remove Float, the rectangles all line up perfectly without overlapping. Maybe your'e seeing something different because of your browser or maybe you need to resize your window? Hope I was able to help or provide some insight.