Почему я не могу очистить поплавок при использовании функции BF C на теле? - PullRequest
Новая
       1

Почему я не могу очистить поплавок при использовании функции BF C на теле?

2 голосов
/ 08 мая 2020

На других тегах с помощью BF C можно очистить float, почему тело недоступно. Как и ожидалось, добавьте overflow: hidden в тело, чтобы сформировать BF C, что может добиться эффекта очистки float, но это не так? 

div.f {
  float: left;
  width: 100px;
  height: 100px;
  background: red;
  margin-right: 1px;
}

body {
  overflow: hidden;
  border: 1px dashed skyblue;
}

.p {
  overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- <div class="p">
        <div class="f"></div>
        <div class="f"></div>
    </div> -->

    <div class="f"></div>
    <div class="f"></div>
</body>

</html>

Ответы [ 2 ]

2 голосов
/ 08 мая 2020

, потому что переполнение имеет особое поведение при применении к элементу body и вместо этого распространяется на элемент html. Чтобы этого избежать, вам нужно добавить overflow:auto к html: 

div.f {
  float: left;
  width: 100px;
  height: 100px;
  background: red;
  margin-right: 1px;
}

body {
  overflow: hidden;
  border: 1px dashed skyblue;
}

html {
  overflow: auto;
}
<div class="f"></div>
<div class="f"></div>

UA должны применять к области просмотра значения overflow-*, установленные в элементе root. Однако, когда элемент root является элементом [HTML] html (включая синтаксис XML для HTML), значение переполнения которого видно (по обеим осям), и этот элемент имеет элемент body как дочерний, вместо этого пользовательские агенты должны применять к области просмотра значения overflow-* первого такого дочернего элемента. Элемент, из которого распространяется значение, должен иметь используемое значение переполнения visible . ref

Таким образом, ваш элемент body снова будет иметь overflow:visible после распространения

1 голос
/ 08 мая 2020

Чтобы он работал с телом, вы можете использовать display:flow-root, я считаю, что это связано с тем, как ширина содержимого влияет на отображение / рендеринг тела, и добавляя display:flow-root внутри него будет очищен плавающий тег. 

div.f {
  float: left;
  width: 100px;
  height: 100px;
  background: red;
  margin-right: 1px;
}

body {
  display: flow-root;
  border: 1px dashed skyblue;
}

.p {
  overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--<div class="p">
        <div class="f">AAAA</div>
        <div class="">test</div>-->
    </div>

    <div class="f"></div>
    <div class="f"></div>
</body>

</html>
...