Дочерний элемент теряет плавающее значение, когда позиция родительского элемента является фиксированной - PullRequest
Новая
       1

Дочерний элемент теряет плавающее значение, когда позиция родительского элемента является фиксированной

2 голосов
/ 09 апреля 2019

Я создаю панель навигации, которая будет оставаться неподвижной при прокрутке вниз. Вот код. 

<header>
    <a class="logo" href="/">Logo_name</a>
    <nav>
        <a href="#">Menu_1</a>
        <a href="#">Menu_2</a>
    </nav>
    <div style="clear: both;"></div>
</header>

А вот и CSS 

header {
    position: fixed;
    max-width:960px;
}

.logo {
    float: left;
}
nav {
    float: right;
}

Я хочу, чтобы логотип был справа, а меню навигации - справа.

Сейчас кажется, что поплавок работает, но элементы навигации появляются сразу после логотипа, а не перемещаются к правому краю.

Если я удаляю позицию: фиксированный код из заголовка, кажется, что плавающий работает нормально.

Ответы [ 3 ]

1 голос
/ 09 апреля 2019

Это было бы решением с использованием flexbox вместо float: 

header {
  width: 100%;
  max-width: 960px;
  display: flex;
  justify-content: space-between;
}

.logo {
  align-self: flex-start;
}

nav {
  align-self: flex-end;
}
<header>
  <a class="logo" href="/">Logo_name</a>
  <nav>
    <a href="#">Menu_1</a>
    <a href="#">Menu_2</a>
  </nav>
</header>

И вам нужно будет убрать клир: оба; из HTMl. Дайте мне знать, если это работает!

0 голосов
/ 09 апреля 2019

Чтобы ответить на ваш вопрос: Большинство элементов HTML имеют стили по умолчанию, предоставляемые браузером под названием User Agent . <header> имеет значение по умолчанию display display: block;. Элемент с display: block увеличивается до максимальной ширины относительно своего контейнера.

В этом случае контейнером <header> является <body>, который берет свою ширину от <html>, который занимает весь видовой экран .

Поскольку вы установили max-width на 960px, элемент вырастет до 960 пикселей. Это работает нормально, так как ширина обычно занимает весь видовой экран. Но как только вы устанавливаете абсолютную позицию, в этом случае `исправлено, элемент вынимается из обычного потока документов. Потому что теперь он придерживается фиксированной позиции. Это означает, что у него нет родителя с шириной. Таким образом он теряет свою унаследованную ширину своим родителем (телом).

Чтобы решить вашу проблему с кодом, который вы уже написали, просто добавьте ширину к элементу. Поскольку вы уже установили max-width: 960px;, вы можете сказать, что элемент увеличится до 100% с помощью: width: 100%;. Он остановится на 960px, потому что это его максимальная ширина: 

header {
  position: fixed;
  width: 100%;
  background: blue;
}

a {
  color: white;
}

.logo {
    float: left;
}
nav {
    float: right;
}
<header>
    <a class="logo" href="/">Logo_name</a>
    <nav>
        <a href="#">Menu_1</a>
        <a href="#">Menu_2</a>
    </nav>
    <div style="clear: both;"></div>
</header>
0 голосов
/ 09 апреля 2019

Как упомянул @AngelMdez, Flexbox - лучший путь, чем Floats, position: fixed должен работать одинаково;просто помните, что вы должны указать ширину, чтобы сам элемент использовал ожидаемое пространство.

После этого вы можете удалить все свойства float и clear, и все будет в порядке. 

body {
  margin: 0;
}

header {
  position: fixed;
  width: 100%;
  max-width: 960px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  background-color: gray;
}

.content {
  padding-top: 70px;
}
<header>
  <a class="logo" href="/">Logo_name</a>
  <nav>
    <a href="#">Menu_1</a>
    <a href="#">Menu_2</a>
  </nav>
</header>

<div class="content">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

Оригинальный пример с поплавками 

header {
  position: fixed;
  width: 100%;
  max-width: 960px;
  background-color: lightgray;
  height: 60px;
}

.logo {
  float: left;
}

nav {
  float: right;
}
<header>
  <a class="logo" href="/">Logo_name</a>
  <nav>
    <a href="#">Menu_1</a>
    <a href="#">Menu_2</a>
  </nav>
  <div style="clear: both;"></div>
</header>

<div class="content">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...