为什么元素会下降

Question

基本上我有3个图像和一个div.contact坐在彼此旁边包含在Section.gallery中。 div.contact已经向右浮动且相对定位但不是图像。 我的问题是，我无法在页脚中获得“NEWSLETTER”占据右侧的可用空间，它不断下降。

然而，当应用一个明确的：两个页脚看看会发生什么。它在页脚和Section.gallery之间创建一个巨大的空间，但'NEWSLETTER'占用了所有的空间

当我使用谷歌浏览器检查元素检查时，我有一个很大的余地，我没有申请。

相关代码

HTML部分

   <section class="gallery">

        <div class="display-gallery">
            <img src="images/picture.png" />
            <img src="images/picture.png" />
            <img src="images/picture.png">
        </div>
        <!--End gallery-->

        <div class="contact">
            <p>contact</p>
            <h2>booking <br />
                <span>0123.456.789</span><br />
                <span>0123.456.789</span><br />
                <span> contact@xidian.com</span>
            </h2>
            <a href="#" class="findout-more ">Find out more</a>
        </div>
        <!--End-->

    </section>
    <!--End Section-->

    <footer>
            <div class="nav-wrapper">
                <nav class="footer-nav">
                    <ul>
                        <li><a href="#"> Home </a></li>
                        <li><a href="#"> Biography </a></li>
                        <li><a href="#"> Photo Gallery</a></li>
                        <li><a href="#"> Calendar </a></li>
                        <li><a href="#"> Videos </a></li>
                        <li><a href="#"> Contact me </a></li>
                    </ul>
                    <ul class="second-nav">
                        <li><a href="#"> Home </a></li>
                        <li><a href="#"> Biography </a></li>
                        <li><a href="#"> Photo Gallery</a></li>
                        <li><a href="#"> Calendar </a></li>
                        <li><a href="#"> Videos </a></li>
                        <li><a href="#"> Contact me </a></li>
                    </ul>
                </nav>


                <div class="more-info">
                    <h3>some information here</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipis ellt. Cras non nibh
                        sed vellt ultrices convallis eget vitae leo. Vestibulum porttitor dolor
                        sed is semper id consequat urna tristique vivamus sodales, nibh id comisam risti.
                    </p>
                </div>

                <div class="follow-me">
                    <h3>follow me </h3>
                    <a href="">
                        <img src="images/youtube.png">
                    </a>
                    <a href="">
                        <img src="images/fb.png">
                    </a>
                    <a href="">
                        <img src="images/twitter.png">
                    </a>
                    <a href="">
                        <img src="images/link.png">
                    </a>

                </div>

                <div class="newsletter">
                    <h3>newsletter</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur<br />adipiscing ellt. Cras non nibh sed.</p>
                    <input type="text" name="comment" ><br />
                    <input type="submit" value="Send" >
                </div>
        </div>

CSS：

.display-gallery img  {
    width: 215px ;
    height:195px;
    margin-right: 30px;
    border: 1px solid #D9D9D9;
}

.display-gallery img:hover{
    transition-duration: 0.5s ;
    transform: scale(1.2);
}

.contact  {
    float: right;
    width: 215px ;
    height:195px;
    position: relative;
    top: -199px;
    border: 1px solid #D9D9D9;
}

.contact h2 {
    font-size: 16px;
    text-transform: uppercase;
    line-height: 20px;
    padding-left: 12px;
}

.contact p {
    text-transform: uppercase;
    color: #8e3a17;
    font-size: 16px;
    padding-top: 20px;
    padding-bottom: 18px;
    padding-left: 12px;
}

.contact a {
    margin-top: 10px;
    margin-left: 12px;
}

.nav-wrapper {
    outline: solid 1px greenyellow;
    overflow: hidden;
    border-top: 2px solid #D9D9D9;
    border-bottom: 1px solid #D9D9D9;
    padding-top: 14px;
    padding-bottom: 13px;

}
.footer-nav ul  {
   float: left;
   margin-right: 25px;

}

.footer-nav ul li {
    font-size: 10px;
    text-transform: uppercase;
    line-height: 19px;
}

.second-nav {
    margin-right: 25px;
}

.more-info {
    border-left: dashed 1px #D9D9D9;
    border-right: dashed 1px #D9D9D9;
    float: left;
    width: 245px;
    padding-left: 20px;
    padding-right: 20px;
}

.more-info h3 {
    font-size: 10px;
    text-transform: uppercase;
    line-height: 19px;
}

.more-info p {
    font-size: 10px;
    display: inline-block;
    line-height: 13px ;
    padding-top: 17px;
    width: 210px;
    word-break: break-all;
}

.follow-me {
    padding: 0 25px 0 25px ;
    float: left;
    width: 245px;
    border-right: 1px dashed #D9D9D9;
}

.follow-me h3 {
    text-transform: uppercase;
    font-size: 10px;
    line-height: 19px;
}

.follow-me img {
    padding-top: 17px;
    margin-right: 7px;
}

.newsletter {
    float: right;
    width: 205px;
   }

.newsletter h3 {
     text-transform: uppercase;
     font-size: 10px;
     line-height: 19px;
     padding-bottom: 7px;
}

.newsletter p {
     font-size: 10px;
     display: inline-block;
     line-height: 13px;
     padding-bottom: 6px;
 }

input[type= text] {
    width: 205px;
    height: 20px;
    border: 1px solid #D9D9D9;
}

input[type = submit] {
    margin-top: 7px;
    float: right;
    display: inline-block;
    background-color: #8e3a17;
    font-size: 11px;
    color: white;
    width: 55px;
    height: 20px;
    line-height: 15px;
    text-align: center;
    box-shadow: 1px 1px 2px #8e3a17;
}

Ps：我确实应用了css重置 对于长篇文章感到抱歉

Answer 1

按如下方式更新css：

.gallery {
    overflow: hidden;
}
.display-gallery {
    float: left;
}
.contact  {
    float: right;
    width: 215px ;
    height:195px;
    /*position: relative;
    top: -199px;*/ 
    border: 1px solid #D9D9D9;
}

你的第一个div“display-gallery”捕获了屏幕的所有宽度。所以你的“联系人”浮动权利div添加在div块的底部。 （从第二个div“联系人”中删除“top：-199px”，你会看到为什么当你添加清除时：两者都是你有这个差距的页脚）。 您获得页脚的边距是“.contact”div的占位符，您应用“top：-199px”