html - 为什么元素会下拉

Question

基本上我有 3 张图片和一个 div.contact 并排放置在一个 Section.gallery 中。 div.contact 已向右浮动并相对定位但不是图像。我的问题是我无法让页脚中的“NEWSLETTER”占用右侧的可用空间，它一直往下掉。

然而，当对页脚应用 clear:both 时，看看会发生什么。它在页脚和 Section.gallery 之间创建了一个巨大的空间，但“NEWSLETTER”占据了所有空间

当我检查 google chrome inspect element 时，有很大一部分我没有应用。

相关代码

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 block 的底部。 (从第二个 div“contact”中删除“top:-199px”，当你添加 clear: both to footer 时你会明白为什么你有这个差距)。页脚右侧的边距是应用“top: -199px”的“.contact”div 的占位符