Понимание обтекания текста вокруг плавающего div - PullRequest
Новая
       1

Понимание обтекания текста вокруг плавающего div

0 голосов
/ 17 февраля 2019

Я только что посмотрел это видео, чтобы понять, как работает поплавки в CSS

https://www.youtube.com/watch?v=xara4Z1b18I

Ниже приведен мой код

index.html 

  <head>
    <link rel="stylesheet" href="./style.css"
  </head>
  <body>
      <div class="wrapper">
        <div class="box red"></div>
        <div class="box yellow"></div>
        <div class="box green"></div>
        <p>This is a block element</p>
        <p>This is another block element</p>
        <p>And another</p>
        <p>Yet another</p>
    </div>
  </body>
</html>

style.css 

  height: 100px;
  width: 100px;
}

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


.yellow{
  background-color: yellow;
  float: left;

}


.green{
  background-color: green;
  float: left;


}

Вывод, который я получаю, такой:

1.

enter image description here

2.

enter image description here

3.

enter image description here

4.

enter image description here

Что я сомневаюсь:

На плавающем красном, как и ожидалось, желтый скрыт, зеленый смещается вверх.На плавающем желтом он перемещается вправо от красного, зеленый становится скрытым.Но на плавающем зеленом, почему текст оборачивается вокруг зеленого.Разве это не должно быть спрятано за красным дивом?

1 Ответ

0 голосов
/ 17 февраля 2019

Текст обрабатывается по-разному и предназначен для обтекания плавающих элементов.

https://www.w3schools.com/css/css_float.asp

См. Эту скрипку.Как только вы добавляете текст, он обрабатывается иначе, чем нетекстовые элементы.

https://jsfiddle.net/jennifergoncalves/bgsotpvk/20/

p {
  display: block;
  width: 200px;
  height: 200px;
  background: orange;
}

.box {
  height: 200px;
  width: 200px;
  display: block;
}

.red {
  background-color: red;
  opacity: .5;
}

.yellow {
  background-color: yellow;
  opacity: .5;
}

.green {
  background-color: green;
  opacity: .5;
  float: left;
}
<div class="wrapper">

  <div class="box red"></div>
  <div class="box yellow"></div>
  <div class="box green"></div>


  <p>This is a block element</p>
  <p>This is another block element</p>
  <p>And another</p>
  <p>Yet another</p>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...