html - 图像不遵循页面流并覆盖 ul

Question

当我尝试将图像添加到页面底部时，在 <ul> 之后, 图像堆叠到此列表，不遵循页面的流程。

实际结果:

预期结果:

图片在底部

我的代码:

* {
  Font-family: Georgia;
}
h1 {
  font-family: "Playfair display";
  color: rgba(0,102,255,0.7);
  background-color: rgba(120, 249, 17, 0.3);
  word-spacing: 0.3 em;
  font-weight: 400;
  letter-spacing: 0.7em;
  text-align: center;
  text-transform: uppercase;
}
p,ul,ol {
  color: DarkSlateGrey;
  line-height: 1.8em;;
  word-spacing: 0.3em;
  letter-spacing: 0.05em;
}
a { font-style: italic;
}
.header {
	/*background: url("https://www.newyorkspaces.com/upload10/122775/Zebide-Emerald-City-MLB308WALL---Copy.jpg") repeat-x    center center;*/
	background-size: contain;
    background-image: -webkit-linear-gradient(#369, #6CC);
	border-style: solid;
	width: 100%;
	margin: auto;
	position: static;
	z-index: 1000;
}
.menu {
	word-spacing: 5em;
	width: 100%;
	margin: auto;
	text-transform: uppercase;
}
ul {
	width: 80%;
	margin: auto;
	height: 30px;
}
#homepage-menu ul li{
	list-style-type: none;
	display: inline;
	border: 1px solid rgba(204,102,102,1);
	background-color: rgba(0,0,255,0.2);
	font-size: 18px;
	width:90%;
	margin: 0px auto;
}
.content {
	box-sizing: border-box;
	border-style: 1px solid rgba(204,204,204,1);
	background-color: rgba(102,102,102,0.07);
	width: 50%;
	margin: auto;
	padding-top: 10px;
	/*position: relative;
	top: 10px;
	left: 10px; */
	z-index: 999;
	text-align:justify;
}
.link {
	width:50%;
	margin: 0px auto;
	text-align: center;
}
.image {
	height: 400px;
	width: 400px;
	display: block;
	margin: 0px auto;3
}

<div>

<p>So far I have learned the following things:</p>

<ul>
  <li>Create a boilerplate in HTML</li>
  <li>Heading and title</li>
  <li>Create a paragraph</li>
  <li>Create Un-oredered and Ordered Lists (UL & OL)</li>
  <li>Insert a link to a page (Hyperlink)</li>
  <li>Insert Image on your page</li>
  <li>Insert ALT description for unpaired people</li>
  <li>Link image to a hyperlink</li>
  <li>Insert a BREAK onto my page</li>
  <li>W3C Style standard</li>
  <li>Insert non visible comment</li>
  <li>How to set up HTML link to CSS page(style page)</li>
  <li>Styling FONTS (font-family, font-style, font size, font weight, serif-sans-serif,)</li>
  <li>SPACING Lines, words and letters with PX - eM - </li>
  <li>Text TRANSFORM and Text ALIGN</li>
  </ul>
</div>   
   <img class="bowie" src="http://esq.h-cdn.co/assets/16/02/980x490/landscape-1452522826-david-bowie-5.jpg"/>
</body>

Answer 1

出现此问题是因为您的 CSS 代码中的 ul 具有固定高度。

height: 30px;

删除高度将解决问题。

我也加了

img {max-width:100; height: auto}

使图像响应。

* {
  Font-family: Georgia;
}

h1 {
  font-family: "Playfair display";
  color: rgba(0, 102, 255, 0.7);
  background-color: rgba(120, 249, 17, 0.3);
  word-spacing: 0.3em;
  font-weight: 400;
  letter-spacing: 0.7em;
  text-align: center;
  text-transform: uppercase;
}

p,
ul,
ol {
  color: DarkSlateGrey;
  line-height: 1.8em;
  word-spacing: 0.3em;
  letter-spacing: 0.05em;
}

a {
  font-style: italic;
}

.header {
  /*background: url("https://www.newyorkspaces.com/upload10/122775/Zebide-Emerald-City-MLB308WALL---Copy.jpg") repeat-x    center center;*/
  background-size: contain;
  background-image: -webkit-linear-gradient(#369, #6CC);
  border-style: solid;
  width: 100%;
  margin: auto;
  position: static;
  z-index: 1000;
}

.menu {
  word-spacing: 5em;
  width: 100%;
  margin: auto;
  text-transform: uppercase;
}

ul {
  width: 80%;
  margin: auto;
}

#homepage-menu ul li {
  list-style-type: none;
  display: inline;
  border: 1px solid rgba(204, 102, 102, 1);
  background-color: rgba(0, 0, 255, 0.2);
  font-size: 18px;
  width: 90%;
  margin: 0px auto;
}

.content {
  box-sizing: border-box;
  border-style: 1px solid rgba(204, 204, 204, 1);
  background-color: rgba(102, 102, 102, 0.07);
  width: 50%;
  margin: auto;
  padding-top: 10px;
  /*position: relative;
    top: 10px;
    left: 10px; */
  z-index: 999;
  text-align: justify;
}

.link {
  width: 50%;
  margin: 0px auto;
  text-align: center;
}

.image {
  height: 400px;
  width: 400px;
  display: block;
  margin: 0px auto;
}

img {
  max-width: 100%;
  height: auto;
}

<div>

  <p>So far I have learned the following things:</p>

  <ul>
    <li>Create a boilerplate in HTML</li>
    <li>Heading and title</li>
    <li>Create a paragraph</li>
    <li>Create Un-oredered and Ordered Lists (UL & OL)</li>
    <li>Insert a link to a page (Hyperlink)</li>
    <li>Insert Image on your page</li>
    <li>Insert ALT description for unpaired people</li>
    <li>Link image to a hyperlink</li>
    <li>Insert a BREAK onto my page</li>
    <li>W3C Style standard</li>
    <li>Insert non visible comment</li>
    <li>How to set up HTML link to CSS page(style page)</li>
    <li>Styling FONTS (font-family, font-style, font size, font weight, serif-sans-serif,)</li>
    <li>SPACING Lines, words and letters with PX - eM - </li>
    <li>Text TRANSFORM and Text ALIGN</li>
  </ul>
</div>
<img class="bowie" src="http://esq.h-cdn.co/assets/16/02/980x490/landscape-1452522826-david-bowie-5.jpg" />