HTML позиционирование CSS

Question

.container {width: 100%;} 
 
.nav h1 {float: left;} 
 
.nav ul {float: right;} 
 
.nav li {display: inline-block;}

<div class="nav"> 
 
    <div class="container"> 
 
    <h1>.nav h1 Resume</h1> 
 
    <ul> 
 
     <li>.nav ul .nav li Home ul li</li> 
 
     <li>Portfolio ul li</li> 
 
     <li>Skills ul li</li> 
 
     <li>Experience ul li</li> 
 
     <li>Contact ul li</li> 
 
    </ul> 
 
    </div> 
 
</div> 
 

 
<div class="slider"> 
 
    <h2>div.slider h2 Text Testingx</h2> 
 
    <p>Web designer & Developement</p> 
 
    <p>Read less DO more</p> 
 
    <p>HTML</p> 
 
    <p>css</p> 
 
    <h3>I design and develop amazing websites that are sleek, 
 
     easy-to-navigate and exiting to use.</h3> 
 
    <p>Work with us to plan your digital marketing mix and achieve better results online.</p> 
 
</div>

это явно другой вопрос. Первый спросил, как удалить перекрытие. Здесь я спрашиваю, почему после предоставления ширины 100% элементу он все еще позволяет другим элементам вводить свое пространство; это не было даже отдаленно подошло по последнему вопросу

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

Я не понимаю, что здесь происходит. Я пытаюсь создать навигационную панель, но мой div class="slider" продолжает налагать на мой div class="nav". Чтобы разрешить это, я создал контейнерный класс для своих «nav» элементов и предоставил эту 100% ширины. Я понимаю, что если бы эти элементы составляли 100% от ширины, не было бы «свободного» пространства для чего-либо еще. Это, очевидно, не так, будет ли кто-нибудь быть любезным, чтобы объяснить, почему?

Answer 1

вы использовали float:left и float:right .... вот почему nav h1 и nav ul вне документа потока это означает, другой элемент не будет рассматривать их (так как они не существуют). поэтому высота nav равна 0, поэтому ползунок div поднимается вверх.

если вы хотите решения прочитать о CSS ясной собственности

Answer 2

.container {width: 100%;} 
 
.nav h1 {float: left;} 
 
.nav ul {float: right;} 
 
.nav li {display: inline-block;}

<div class="nav"> 
 
    <div class="container"> 
 
    <h1>.nav h1 Resume</h1> 
 
    <ul> 
 
     <li>.nav ul .nav li Home ul li</li> 
 
     <li>Portfolio ul li</li> 
 
     <li>Skills ul li</li> 
 
     <li>Experience ul li</li> 
 
     <li>Contact ul li</li> 
 
    </ul> 
 
    </div> 
 
</div> 
 

 
<div class="slider"> 
 
    <h2>div.slider h2 Text Testingx</h2> 
 
    <p>Web designer & Developement</p> 
 
    <p>Read less DO more</p> 
 
    <p>HTML</p> 
 
    <p>css</p> 
 
    <h3>I design and develop amazing websites that are sleek, 
 
     easy-to-navigate and exiting to use.</h3> 
 
    <p>Work with us to plan your digital marketing mix and achieve better results online.</p> 
 
</div>