新元素在其他元素面前攀升

Question

所以我有我的代码。

IEnumerable<Value> dataSource = // source from data base...

new LineSeries
 {
 Title = "Screws",
 Values = dataSource.AsChartValues(), //converts the source to
                                      //an instance of ChartValues<Value>
},

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; 
}

正如您所看到的，

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

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>