Doubt about floating positioning

Question

Doubt about floating positioning

Navigation

#1 by (1 votes)

0

Hello, I would like you to clarify the following problem. In itself the floating positioning I have it quite understood, but I have been testing the following example.

.contenedor {
  width: 500px;
  background-color: aqua;
  border: 2px solid blue;
  overflow: hidden;
}

.hijo1,
.hijo2,
.hijo3 {
  width: 200px;
  height: 200px;
  margin-bottom: 5px;
}

.hijo1 {
  background-color: red;
  float: left;
}

.hijo2 {
  background-color: green;
}

.hijo3 {
  background-color: yellow;
}

<div class="contenedor">
  <div class="hijo1">
    <h1>1</h1>
  </div>
  <div class="hijo2">
    <h1>2</h1>
  </div>
  <div class="hijo3">
    <h1>3</h1>
  </div>
  <p>Hola como estan gente, espero que muy bien. Saludos</p>
</div>

When the boxes have no content there is no problem, because if I position the first box as floating the second box is placed below it, the thing changes when I add the h1 to make it more indicative and it happens that if, if the second box is placed under the first but NOT in its entirety and above the h1 stays out of it. My question is to what is it? Because the H1 of the second box is not hidden and stays out there if it is inside the box? I hope you can explain me, thank you.

css

asked by Ronald Sanchez 03.01.2018 в 18:33

source

1 answer

how to limit the sending of emails in django Status "stuck" and "Pending" when launching a job on GitLab

score 1 · Accepted Answer

If your question is Why it happens? , the answer is simple:

This is because the floating elements affect texts that are not floating , that is, they can affect the blocks elements such as div, p, section, etc., but for the "" texts "that are around in non-floated boxes, these will behave as if they are being repelled by a magnet of counter charge .

Try to get the text of h1, leave it empty and to this put some style and you will see that it behaves as expected.

In the example that you share with us, although the container of 2, goes up to occupy the space left by container 1, the number that is a "non-floated" text when coming into contact with the original floating element, is he is repelled. In fact "float" was originally used to make compositions like this: MozzilaDev - Float Image .

Now if what you are doing is just playing and experimenting, nothing happens, but if you are trying to superimpose elements and play with visibility layers, try better with position: absolute; as you Recommended before. And z-index to control which element is below what and you will not have problems of this type.

Successes!