为什么 CSS Float 属性重叠在内容下方？

Question

我对 CSS 浮动属性的对齐方式有疑问。在“关于我”部分，我希望 <p> 元素位于图像的右侧，但是，“投资组合”部分中的文本和信息也在图像周围浮动。我该如何设置格式，使“关于我”部分中的文本成为唯一环绕图像的文本，而“作品集”banner/header 独占一行并像块元素一样发挥作用？

<html>
<head>
<title>About</title>
<style>
    #aboutImage, #headerImage{
        display: block;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
    }
    #about, #portfolio{
        background-color: #ff80d5;
        font-family: Gill Sans, sans-serif;
        text-align: left;
        vertical-align: center;
        color: white;
        font-weight: 100;
        block-size: 50px;
        display: flex;
        align-items: center;
        padding-left: 2%;
        
    }

    #portraits, #stationary{
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        font-family: Gills Sans, sans-serif;
        color: #ff80d5;
        font-weight: 200;
    }
    p{
        font-family: Gill Sans, sans-serif;
        font-size: 18px;
        color: #ff80d5;
        border-style: dotted;
        text-indent: 15px;
    }
    #menu, ul li{
        text-align: center;
        display: inline;
        font-family: Gill Sans, sans-serif;
        font-size: 22px;
        padding: 3%;
    }
    a{
        text-decoration: none;
        color: #ff80d5; 
    }
    #caption{
        color: #ff80d5;
        font-family: Gill Sans, sans-serif;
        font-size: 22px;
        text-align: center;
        margin-top: 30%;
    }
    #portfolioImg{
        width: 353px;
        height: 447px;
        margin-left: auto;
        margin-right: auto;
    }
    #portraitGrid, #stationaryGrid{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center;
        align-items: center;
        justify-content: center;
        align-content: center;
        grid-row-gap: 25px;
        padding: 15px;
    }
    #aboutImage{
        float: left;
    }
    #portfolioBlock{
        display:block;
    }
        

</style>
</head>

<body>
    <img ID ="headerImage" src = "Images/Origami Mami Logo.jpeg">
    <div ID = "menu">
    <ul>
        <li> <a href = "">Portfolio </a></li>

        <li> <a href = "">Video</a></li>

        <li><a href = "">Contact</a></li>
    </ul>
    </div>

    <div ID="aboutMe">
    <h1 ID = "about">About Me</h1>

    <br>

    <img ID = "aboutImage" class= "alignLeft" src = "Images/Ms. Mami.jpeg">

    <p class="aboutText"> A Brooklyn native, Origami Mami (Kevin) has been folding for over 15 years. After a friend taught him how to fold an origami flower pot, 
        Origami Mami has been folding almost non-stop since. After a family member was diagnosed with Breast Cancer, and later another with AIDS, 
        he folded and gifted anything he made. The joyful and positive reactions from his sick loved ones gave him the greatest feeling, and which 
        led him to contiuosly fold.
    </p>
    
    <p>Originally teaching himself how to fold anything he found instructions to on the internet, he began adding greater color to his work by 
        making portraits and stationary cards. Now you can spread the same love and joy Origami Mami gave to his loved ones to yours. All portaits 
    and cards are created with careful attention to color, shapes, and patterns.
    </p>
    </div>

    <div ID = "portfolioBlock">

    <h1 ID = "portfolio">Portfolio</h1>
    <p>Each piece of work is carefully thought out in regards to color, paint, origami design, and overall works. Some designs are simple, while
        others a bit more abstract. The statement and takeaway message in each of these pieces is simply, love! With both portraits and stationary
        each piece can easily be gifted, and portraits can be used as decor for home, and/or offices, which helps upkeep the spread of joy. 
    </p>
    </div>

Answer 1

将 overflow: hidden; 添加到 #aboutMe（或任何其他类似元素）以使后续元素从开始即使它包含浮动元素。

#aboutImage,
#headerImage {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

#about,
#portfolio {
  background-color: #ff80d5;
  font-family: Gill Sans, sans-serif;
  text-align: left;
  vertical-align: center;
  color: white;
  font-weight: 100;
  block-size: 50px;
  display: flex;
  align-items: center;
  padding-left: 2%;
}

#portraits,
#stationary {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-family: Gills Sans, sans-serif;
  color: #ff80d5;
  font-weight: 200;
}

p {
  font-family: Gill Sans, sans-serif;
  font-size: 18px;
  color: #ff80d5;
  border-style: dotted;
  text-indent: 15px;
}

#menu,
ul li {
  text-align: center;
  display: inline;
  font-family: Gill Sans, sans-serif;
  font-size: 22px;
  padding: 3%;
}

a {
  text-decoration: none;
  color: #ff80d5;
}

#caption {
  color: #ff80d5;
  font-family: Gill Sans, sans-serif;
  font-size: 22px;
  text-align: center;
  margin-top: 30%;
}

#portfolioImg {
  width: 353px;
  height: 447px;
  margin-left: auto;
  margin-right: auto;
}

#portraitGrid,
#stationaryGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
  grid-row-gap: 25px;
  padding: 15px;
}

#aboutImage {
  float: left;
}

#portfolioBlock {
  display: block;
}
#aboutMe {
  overflow: hidden;
}

<img ID="headerImage" src="http://lorempixel.com/400/300">
<div ID="menu">
  <ul>
    <li> <a href="">Portfolio </a></li>

    <li> <a href="">Video</a></li>

    <li><a href="">Contact</a></li>
  </ul>
</div>

<div ID="aboutMe">
  <h1 ID="about">About Me</h1>

  <br>

  <img ID="aboutImage" class="alignLeft" src="http://lorempixel.com/400/600" />">

  <p class="aboutText"> A Brooklyn native, Origami Mami (Kevin) has been folding for over 15 years. After a friend taught him how to fold an origami flower pot, Origami Mami has been folding almost non-stop since. After a family member was diagnosed with Breast Cancer, and
    later another with AIDS, he folded and gifted anything he made. The joyful and positive reactions from his sick loved ones gave him the greatest feeling, and which led him to contiuosly fold.
  </p>

  <p>Originally teaching himself how to fold anything he found instructions to on the internet, he began adding greater color to his work by making portraits and stationary cards. Now you can spread the same love and joy Origami Mami gave to his loved ones
    to yours. All portaits and cards are created with careful attention to color, shapes, and patterns.
  </p>
</div>

<div ID="portfolioBlock">

  <h1 ID="portfolio">Portfolio</h1>
  <p>Each piece of work is carefully thought out in regards to color, paint, origami design, and overall works. Some designs are simple, while others a bit more abstract. The statement and takeaway message in each of these pieces is simply, love! With both
    portraits and stationary each piece can easily be gifted, and portraits can be used as decor for home, and/or offices, which helps upkeep the spread of joy.
  </p>
</div>

为什么 CSS Float 属性重叠在内容下方？

why is CSS Float property overlapping below content?

html

css

image

css-float

为什么 CSS Float 属性 重叠在内容下方？

why is CSS Float property overlapping below content?

html

css

image

css-float

为什么 CSS Float 属性重叠在内容下方？