CODEWITHSUNDEEP
htmlcsscss-float
Cirrus
Cirrus

Reputation: 105

css float with border collapse

I am a novice in css and got a problem when I learned the behavior of float from MDN website https://developer.mozilla.org/en-US/docs/Web/CSS/float. I tried CodePen example on the above website and commented out line 17 in the css file. The result I got is that the blue box seems magically disappear. My guess is that there is something wrong with border collapsing. Can anyone point me in the right direction and explain what's going on there?

Upvotes: 0

Views: 386

Answers (2)

Pankaj Phartiyal
Pankaj Phartiyal

Reputation: 1691

Its because the box 3 is now behind box 1.

What float means is, any content after the element will wrap in the opposite direction and also its flow will be reset i.e. it will start from the point where it should have been placed when the float element is removed from DOM.

For example Float behaviour

As you can see the actual position of the paragraph starts from the initial position of 1.

What will happen when there is a block element of the same width and height instead of the paragraph?

Float behaviour with blocks of same width and height

Exactly!! It will go behind box 1. Why 3 is below 1? Because there is no space on the right. If we increase the box 3 width then it will wrap on left accordingly.

Float behaviour with a larger box wrapping

And so what will happen in your case?

Float final layout

Yes, box 3 will go behind box 1 and everything else is laid out accordingly.

Upvotes: 1

Chaska
Chaska

Reputation: 3205

  1. If you unset float for box 3 it will go back to the left.
  2. You cannot see it because the box 1 has float: left and covers it. Try making box 1 transparent to have box 3 appears. (Refer to the snippet below)
  3. Content of box 3 will be pushed to next line because box 1 occupied the very left position.

Correct me if any mistakes. Thanks.

section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 50px;
  height: 50px;
}

.left {
  float: left;
  background: pink;
}

.right {
  /* float: right; */
  background: cyan;
}
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/float -->
<section>
  <div class="left" style="opacity:0;">1</div>
  <div class="left">2</div>
  <div class="right">3</div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Morbi tristique sapien ac erat tincidunt, sit amet dignissim
    lectus vulputate. Donec id iaculis velit. Aliquam vel
    malesuada erat. Praesent non magna ac massa aliquet tincidunt
    vel in massa. Phasellus feugiat est vel leo finibus congue.
  </p>
</section>

Upvotes: 1

Related Questions