新元素排在其他元素前面

Question

这就是我所拥有的代码。

body {
 margin: 0;
    padding: 0;
 font-family: "Yanone Kaffeesatz", Arial, sans-serif;
}

#myphotos {
    color: #464646;
    margin-left: 15px;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 7px;
    letter-spacing: 1px;
}

#aboutme {
    color: #464646;
    margin-right: 15px;
    float: right;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 7px;
    letter-spacing: 1px;
}

#myphotos:hover {
    border-style: solid;
    border-width: 0px;
    box-shadow: 0px 5px 20px #464646;
    transition: all 0.3s ease;
}

#aboutme:hover {
    border-style: solid;
    border-width: 0px;
    box-shadow: 0px 5px 20px #464646;
    transition: all 0.3s ease; 
}

  <title>Images</title>
 <link rel="stylesheet" type="text/css" href="styles/main.css">
 <link href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet">

<body>

<div class="content">
<header class="artnames">
    <a href="#"><h1 id="myphotos">MY PHOTOS</h1></a>
    <a href="#"><h1 id="aboutme">ABOUT ME</h1></a>
</header>
<div class="photos">
<img src="images/streetart.jpg" style="width:50%; float: left; clear: left;">
<img src="images/streetart3.jpg" style="width:50%; float: right;">
<img src="images/streetart2.jpg" style="width:50%; float: left;">
<img src="images/streetart4.jpg" style="width:50%; float: right;">
<img src="images/streetart5.jpg" style="width:50%; margin-top: -3px; float: left;">
</div>
</div>

<div class="footerr">
 <p>I love when nothing  works, aaaaa I love when nothing  works, aaaaa I love when nothing  works, aaaaa I love when nothing  works, aaaaa I love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaa</p>
</div>
</body>

如您所见，

元素位于按钮中间的顶部。我应该怎么做才能继续按正常顺序放置元素？图像之后。是的，我知道，我很烂...

Answer 1

你可以像这样清除浮动；

.artnames:after{ 
    content:"";
    display:table;
    clear:both; 
}

body {
 margin: 0;
    padding: 0;
 font-family: "Yanone Kaffeesatz", Arial, sans-serif;
}

#myphotos {
    color: #464646;
    margin-left: 15px;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 7px;
    letter-spacing: 1px;
}

#aboutme {
    color: #464646;
    margin-right: 15px;
    float: right;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 7px;
    letter-spacing: 1px;
}

#myphotos:hover {
    border-style: solid;
    border-width: 0px;
    box-shadow: 0px 5px 20px #464646;
    transition: all 0.3s ease;
}

#aboutme:hover {
    border-style: solid;
    border-width: 0px;
    box-shadow: 0px 5px 20px #464646;
    transition: all 0.3s ease; 
}

.artnames:after{ 
 content:"";
 display:table;
 clear:both; 
}

<div class="content">
<header class="artnames">
    <a href="#"><h1 id="myphotos">MY PHOTOS</h1></a>
    <a href="#"><h1 id="aboutme">ABOUT ME</h1></a>
</header>
<div class="photos">
<img src="images/streetart.jpg" style="width:50%; float: left; clear: left;">
<img src="images/streetart3.jpg" style="width:50%; float: right;">
<img src="images/streetart2.jpg" style="width:50%; float: left;">
<img src="images/streetart4.jpg" style="width:50%; float: right;">
<img src="images/streetart5.jpg" style="width:50%; margin-top: -3px; float: left;">
</div>
</div>

<div class="footerr">
 <p>I love when nothing  works, aaaaa I love when nothing  works, aaaaa I love when nothing  works, aaaaa I love when nothing  works, aaaaa I love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaa</p>
</div>

新元素排在其他元素前面

New elements are climb in front of other elements

html

css

position

elements