无法在正确的位置给元素留出余量

Question

＆＃13;

＆＃13;

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
 HTML5 display-role reset for older browsers 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


////////////* CSS reset end *////////////////



body{
    background: #fff;
  
}

h1,h2,h3,h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

p,a {
      font-family: 'Open Sans', sans-serif;
}

header {
    background: #fff;
    padding: 20px 0;
    position: fixed;
    top:0;
    width:100%;
    z-index: 1;
   border-bottom: 1px solid rgba(0,0,0,0.1);
}

*{
    box-sizing: border-box;
    outline: none;
}

header:after{
    content: "";
    display:table;
    clear:both;
}

.wrapper {
    width: 96%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2%; 
}

div#logo {
    background: url(img/logo.png) no-repeat;
    width: 79px;
    height: 28px;
    float: left;
}

header nav {
    float:right;
    
}

header nav li a {
    color:#606060;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    font-size:12px;
    
}

header nav h2 {
    height: 0;
    text-indent: -10000px;
}

header nav li {
    float: left;
    margin-left: 22px;
    margin-top: 8px;
}

#main-banner {
    background: url(img/2.jpg) no-repeat center center ;
    background-size: cover;
    height: 80vh;
    text-align: center;  

}

.banner-overlay {
    text-align: center;
	position: relative;
	top: 50%;
	margin: 0;
	transform: translatey(-50%);
}

h1 {
    margin-top: 20px;
    color: #fff;
    text-transform: uppercase;
    font-size: 72px;
    
}

.banner-overlay .after-welcome {
    color: #fff;
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 0 20%;
    font-family: 'Open Sans', sans-serif;
    
    
}

.btn {
/*    background: #bf8040;*/
background: linear-gradient(to bottom,  #f0b7a1 0%,#752201 100%,#bf6e4e 100%,#752201 100%); 
    color: #fff;
    display: block;
    padding: 25px 20px;
    width: 220px;
    margin: 0 auto;
    text-decoration: none;
    font-size: 18px;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 700; 
}


section {
    text-align: center;
    padding: 125px 0;
}

#gallery {
    background: #dfdfdf;
}

h2 {
   color:#282828;
    margin-top: 10px;
    font-size: 45px;
   
}

h3 {
    color:#777;
    font-weight: 400;
    font-size: 20px;
    margin-top:20px;
    margin-bottom:75px;
}


.projects {
    background: #fff;
}

section:after{
    content: "";
    display:table;
    clear:both;
}

.gallery-image {
    float: left;
    width: 33.333%;
    padding-left:1.5%;
    padding-right:1.5%;
    text-align: center; 

}

#gallery img{
    width: 100%;
    height: auto;       
}

.gallery-image a {
  display: block;
  background: white;
}

.img-text {
  background: white;
  padding: 20px;
}

.img-text p{
    font-size: 14px;
    color:#777;
    margin-top:5px;
}

.margin-top {
  margin-top: 20px;
}

＆＃13;

 <main>
        <section id="gallery">
            <div class="wrapper">
                <h2>Our Gallery</h2>
                <h3>Lorem bizzle dolizzle sizzle amet</h3>
                <div class="projects">
                    <div class="gallery-image">
                        <a href=""> <img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
                        <div class="img-text">
                            <h4>A project</h4>
                            <p>Some text</p>
                        </div>
                    </div>
                </div>
                <div class="projects">
                    <div class="gallery-image">
                        <a href=""><img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
                        <div class="img-text">
                            <h4>A project</h4>
                            <p>Some text</p>
                        </div>
                    </div>
                </div>
                <div class="projects">
                    <div class="gallery-image">
                        <a href=""> <img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
                        <div class="img-text">
                            <h4>A project</h4>
                            <p>Some text</p>
                        </div>
                    </div>
              </div>
              
              <p class="margin-top">Lorem bizzle dolizzle sizzle amet</p>
              
          </div>
       </section>

＆＃13;

＆＃13;

＆＃13;

我试图添加一个<p>并给它一个上边距，以便其中的内容远离图库内容，但它会在图像的顶部提供该边距。

我该如何解决这个问题？如果我没有弄错的话，这可能是一个明确的问题，但是clearfix并没有帮助。

CodePen

Answer 1

是的，因为它上面有3个浮动元素，所以它是一个明确的问题。为这些.projects元素添加一个包装器并清除浮动。

＆＃13;

＆＃13;

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
 HTML5 display-role reset for older browsers 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


////////////* CSS reset end *////////////////



body{
    background: #fff;
  
}

h1,h2,h3,h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

p,a {
      font-family: 'Open Sans', sans-serif;
}

header {
    background: #fff;
    padding: 20px 0;
    position: fixed;
    top:0;
    width:100%;
    z-index: 1;
   border-bottom: 1px solid rgba(0,0,0,0.1);
}

*{
    box-sizing: border-box;
    outline: none;
}

header:after{
    content: "";
    display:table;
    clear:both;
}

.wrapper {
    width: 96%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2%; 
}

div#logo {
    background: url(img/logo.png) no-repeat;
    width: 79px;
    height: 28px;
    float: left;
}

header nav {
    float:right;
    
}

header nav li a {
    color:#606060;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    font-size:12px;
    
}

header nav h2 {
    height: 0;
    text-indent: -10000px;
}

header nav li {
    float: left;
    margin-left: 22px;
    margin-top: 8px;
}

#main-banner {
    background: url(img/2.jpg) no-repeat center center ;
    background-size: cover;
    height: 80vh;
    text-align: center;  

}

.banner-overlay {
    text-align: center;
	position: relative;
	top: 50%;
	margin: 0;
	transform: translatey(-50%);
}

h1 {
    margin-top: 20px;
    color: #fff;
    text-transform: uppercase;
    font-size: 72px;
    
}

.banner-overlay .after-welcome {
    color: #fff;
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 0 20%;
    font-family: 'Open Sans', sans-serif;
    
    
}

.btn {
/*    background: #bf8040;*/
background: linear-gradient(to bottom,  #f0b7a1 0%,#752201 100%,#bf6e4e 100%,#752201 100%); 
    color: #fff;
    display: block;
    padding: 25px 20px;
    width: 220px;
    margin: 0 auto;
    text-decoration: none;
    font-size: 18px;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 700; 
}


section {
    text-align: center;
    padding: 125px 0;
}

#gallery {
    background: #dfdfdf;
}

h2 {
   color:#282828;
    margin-top: 10px;
    font-size: 45px;
   
}

h3 {
    color:#777;
    font-weight: 400;
    font-size: 20px;
    margin-top:20px;
    margin-bottom:75px;
}


.projects {
    background: #fff;
}

section:after{
    content: "";
    display:table;
    clear:both;
}

.gallery-image {
    float: left;
    width: 33.333%;
    padding-left:1.5%;
    padding-right:1.5%;
    text-align: center; 

}

#gallery img{
    width: 100%;
    height: auto;       
}

.gallery-image a {
  display: block;
  background: white;
}

.img-text {
  background: white;
  padding: 20px;
}

.img-text p{
    font-size: 14px;
    color:#777;
    margin-top:5px;
}

.margin-top {
  margin-top: 20px;
}
.projects-container:after {
  content: '';
  display: table;
  clear: both;
}

＆＃13;

<main>
  <section id="gallery">
    <div class="wrapper">
      <h2>Our Gallery</h2>
      <h3>Lorem bizzle dolizzle sizzle amet</h3>
      <div class="projects-container">
        <div class="projects">
          <div class="gallery-image">
            <a href=""> <img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
            <div class="img-text">
              <h4>A project</h4>
              <p>Some text</p>
            </div>
          </div>
        </div>
        <div class="projects">
          <div class="gallery-image">
            <a href=""><img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
            <div class="img-text">
              <h4>A project</h4>
              <p>Some text</p>
            </div>
          </div>
        </div>
        <div class="projects">
          <div class="gallery-image">
            <a href=""> <img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
            <div class="img-text">
              <h4>A project</h4>
              <p>Some text</p>
            </div>
          </div>
        </div>
      </div>

      <p class="margin-top">Lorem bizzle dolizzle sizzle amet</p>

    </div>
  </section>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将display: inline-block;提供给段落。

让我自己解释一下：

p{
  display:block;
}

现在p利润率将起作用，因此Lorem bizzle dolizzle sizzle amet＆＃34;项目之后的句子将会下降，因为它有利润率。

Answer 3

只需在clear:both代码

上方添加<p> div即可

<div style="clear: both;"></div>

检查下面的SNIPPET

     	
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
 HTML5 display-role reset for older browsers 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


////////////* CSS reset end *////////////////



body{
    background: #fff;
  
}

h1,h2,h3,h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

p,a {
      font-family: 'Open Sans', sans-serif;
}

header {
    background: #fff;
    padding: 20px 0;
    position: fixed;
    top:0;
    width:100%;
    z-index: 1;
   border-bottom: 1px solid rgba(0,0,0,0.1);
}

*{
    box-sizing: border-box;
    outline: none;
}

header:after{
    content: "";
    display:table;
    clear:both;
}

.wrapper {
    width: 96%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2%; 
}

div#logo {
    background: url(img/logo.png) no-repeat;
    width: 79px;
    height: 28px;
    float: left;
}

header nav {
    float:right;
    
}

header nav li a {
    color:#606060;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    font-size:12px;
    
}

header nav h2 {
    height: 0;
    text-indent: -10000px;
}

header nav li {
    float: left;
    margin-left: 22px;
    margin-top: 8px;
}

#main-banner {
    background: url(img/2.jpg) no-repeat center center ;
    background-size: cover;
    height: 80vh;
    text-align: center;  

}

.banner-overlay {
    text-align: center;
	position: relative;
	top: 50%;
	margin: 0;
	transform: translatey(-50%);
}

h1 {
    margin-top: 20px;
    color: #fff;
    text-transform: uppercase;
    font-size: 72px;
    
}

.banner-overlay .after-welcome {
    color: #fff;
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 0 20%;
    font-family: 'Open Sans', sans-serif;
    
    
}

.btn {
/*    background: #bf8040;*/
background: linear-gradient(to bottom,  #f0b7a1 0%,#752201 100%,#bf6e4e 100%,#752201 100%); 
    color: #fff;
    display: block;
    padding: 25px 20px;
    width: 220px;
    margin: 0 auto;
    text-decoration: none;
    font-size: 18px;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 700; 
}


section {
    text-align: center;
    padding: 125px 0;
}

#gallery {
    background: #dfdfdf;
}

h2 {
   color:#282828;
    margin-top: 10px;
    font-size: 45px;
   
}

h3 {
    color:#777;
    font-weight: 400;
    font-size: 20px;
    margin-top:20px;
    margin-bottom:75px;
}


.projects {
    background: #fff;
}

section:after{
    content: "";
    display:table;
    clear:both;
}

.gallery-image {
    float: left;
    width: 33.333%;
    padding-left:1.5%;
    padding-right:1.5%;
    text-align: center; 

}

#gallery img{
    width: 100%;
    height: auto;       
}

.gallery-image a {
  display: block;
  background: white;
}

.img-text {
  background: white;
  padding: 20px;
}

.img-text p{
    font-size: 14px;
    color:#777;
    margin-top:5px;
}

.margin-top {
  margin-top: 20px;
}

 <main>
        <section id="gallery">
            <div class="wrapper">
                <h2>Our Gallery</h2>
                <h3>Lorem bizzle dolizzle sizzle amet</h3>
                <div class="projects">
                    <div class="gallery-image">
                        <a href=""> <img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
                        <div class="img-text">
                            <h4>A project</h4>
                            <p>Some text</p>
                        </div>
                    </div>
                </div>
                <div class="projects">
                    <div class="gallery-image">
                        <a href=""><img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
                        <div class="img-text">
                            <h4>A project</h4>
                            <p>Some text</p>
                        </div>
                    </div>
                </div>
                <div class="projects">
                    <div class="gallery-image">
                        <a href=""> <img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
                        <div class="img-text">
                            <h4>A project</h4>
                            <p>Some text</p>
                        </div>
                    </div>
              </div>
              <div style="clear: both;"></div>
              <p class="margin-top">Lorem bizzle dolizzle sizzle amet</p>
              
          </div>
       </section>
</main>