个人作品集页面图片溢出div，clearfix无效问题的解决与规避

Hey there! Let's get that image from spilling into your Skills section and get your About Me layout looking clean. Here's what's going on and how to fix it:

What's Causing the Overflow? #

The main issue is that you've set a fixed height: 300px on your .intro container. When your floated image and text together take up more space than that 300px height, the floated image breaks out of the container and spills into the section below. Your clearfix is correctly written, but it can't do its job if the parent container has a rigid fixed height that doesn't account for the actual content size.

Step-by-Step Fix #

1. Remove the Fixed Height from .intro #

First, let the .intro container expand naturally to fit its content. Delete the height: 300px line from your .intro CSS rule.

2. Add Spacing Between Image and Text #

To make the layout look better, add a right margin to your floated image so the text isn't squashed up against it.

3. Verify Clearfix is Applied Correctly #

Your clearfix class is already set up right, but make sure it's wrapping all the floated content (which it is in your HTML, so we just need the parent container to let it work).

Modified Code #

Updated HTML (no structure changes needed) #

<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title> Peter Santiago</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header class="main-header">
<div class="inner">
<p>Hello!</p>
<h1>I'm <br> Peter Santiago </h1>
<span>Freelance Creative</span>
</div>
</header>
<div class="intro">
<h2>About Me </h2>
<div class="clearfix">
<img class="img-circle" src='https://i.imgur.com/YzoIKdk.jpg'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quibus doctissimi illi veteres inesse quiddam caeleste et divinum putaverunt. Sed haec quidem liberius ab eo dicuntur et saepius. Si de re disceptari oportet, nulla mihi tecum, Cato, potest esse dissensio. </p>
</div>
</div>
<div class="skills">
<h2>My Skills </h2>
</div>
</body>
</html>

Updated CSS #

/* About me-----------------*/
.intro{
background:white;
padding: 50px;
/* Removed fixed height here */
}
.intro h2 {
color:#5D667C ;
font-family:"Open Sans";
font-weight:800;
font-size: 4em;
text-align: center;
}
.img-circle {
float:left;
margin-right: 20px; /* Added spacing between image and text */
}
.intro p {
text-align:justify;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
/* Skills---------------*/
.skills {
background-color:#5D667C ;
color: white;
height: 300px;
}
.skills h2 {
color:white ;
font-family:"Open Sans";
font-weight:800;
font-size: 4em;
text-align: center;
}

How to Avoid This Issue in the Future #

• Skip fixed heights for containers with floated content: Instead of setting a rigid height, use min-height if you need a minimum size, or let the container grow with its content.
• Use modern layout methods: Float layouts can be tricky for these reasons. Consider using Flexbox or Grid for more predictable, easier-to-maintain layouts. For example, turning your .clearfix div into a flex container would let you align image and text without floats at all:

  .clearfix {
    display: flex;
    gap: 20px; /* Replaces margin-right for clean spacing */
    align-items: flex-start; /* Aligns image and text at the top */
  }
  

• Double-check clearfix placement: Always apply the clearfix to the direct parent of all floated elements to ensure it contains them properly.

内容的提问来源于stack exchange，提问作者Natalie Pickrom