当我们设置一个父元素并增加子元素的内容时，父元素的大小不应该自动缩放以适应子元素吗？
相比之下，应用了 CSS 属性（例如为其赋予的背景）的父级不会针对父级进行缩放。这是我尝试创建一个 3 列的简单布局，并且父级不缩放，因此没有应用边框底部：
如您所见，内容溢出了父级，并且所有内容都没有包含在父级中。我应该如何解决这个问题？
【问题讨论】：
您需要的是对您的#bodytext 进行清除修复，因为您的所有内容都是浮动的。
将以下行添加到您的#bodytext：
#bodytext{
overflow: auto;
}
为了更好地理解，为什么需要 clearfix，read this answer。
【讨论】：
您没有正确清除floats - 将overflow: hidden 添加到bodyText 或添加使用after 的after 元素clear: left：
#bodytext:after{
clear: left;
content: '';
display: block;
}
请看下面的演示：
@font-face {
font-family: "handlee";
src: url("handlee.ttf");
}
@font-face {
font-family: "berkshirestyle";
src: url("berkshire.ttf");
}
body {
background-image: url("glass.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
#FirstHeader {
float: left;
clear: left;
padding-left: 100px;
color: white;
font-size: 70px;
color: rgb(122, 38, 0);
text-decoration: underline;
font-family: handlee;
font-style: italic;
}
#bodytext {
padding: 30px;
font-family: berkshirestyle, cursive;
font-size: 1em;
color: #BCBCBC;
overflow: hidden;
}
#bodytext:after{
clear: left;
content: '';
display: block;
}
#bodytext {
clear: left;
margin-left: 30px;
margin-bottom: 50px;
border-bottom: 10px solid red;
background-color: red;
}
#bodytext div {
display: inline-block;
width: 30%;
margin-right: 20px;
float: left;
}
form {
clear: both;
}<h1 id="FirstHeader">Coffes here</h1>
<img src="coffee.png" id="Coffee" alt="coffee image" width="100" height="125" />
<div id="bodytext">
<div id="FirstParagraph">
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra. Duis
maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus
vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula auctor pretium non
vel arcu.<br> purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed
nulla in viverra. Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim
a sem. Duis eget risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus
ligula auctor pretium non vel arcu.purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac.
Mauris cursus sed nulla in viverra. Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla
dignissim a sem. Duis eget risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula
faucibus ligula auctor pretium non vel arcu.
</div>
<div id="SecondParagraph">
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra. Duis
maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus
vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula auctor pretium non
vel arcu.
<br/> purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget
risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula auctor pretium
non vel arcu.purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla
in viverra. Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem.
Duis eget risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula
auctor pretium non vel arcu.
</div>
<div id="ThirdParagraph">
eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget
risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula auctor pretium
non vel arcu.purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla
in viverra. Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem.
Duis eget risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula
auctor pretium non vel arcu.
<br> purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget
risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula auctor pretium
non vel arcu.
</div>
</div>
<form id="MainForm">
<label for="Name">Name: </label>
<input type="text" id="Name" placeholder="e.g nirajan basnet" required/>
<label for="Email">Email</label>
<input type="email" id="Email" placeholder="sth@sthmail.com" required/>
<label for="Comment">Your comment: </label>
<br>
<textarea maxlength="100" id="Comment" placeholder="What do you think about the site?"></textarea>
</form>【讨论】：
你可以使用display:inline-block:
#bodytext {
display:inline-block;
}
【讨论】：
只需在#bodytext div 中使用float:left 即可解决此问题，请检查下面的sn-p..
@font-face{
font-family: "handlee";
src : url("handlee.ttf");
}
@font-face{
font-family:"berkshirestyle";
src: url("berkshire.ttf");
}
body{
background-image: url("glass.jpg");
background-attachment: fixed;
background-repeat:no-repeat;
background-size:cover;
}
#FirstHeader{
float:left;
clear:left;
padding-left:100px;
color:white;
font-size: 70px;
color: rgb(122, 38, 0);
text-decoration: underline;
font-family: handlee;
font-style: italic;
}
#bodytext{
padding: 30px;
font-family: berkshirestyle, cursive;
font-size: 1em;
color: #BCBCBC;
float: left;
}
#bodytext{
clear:left;
margin-left: 30px;
margin-bottom: 50px;
border-bottom: 10px solid red;
background-color: red;
}
#bodytext div{
display: inline-block;
width: 30%;
margin-right: 20px;
float: left;
}
form{
clear:both;
}<h1 id = "FirstHeader">Coffes here</h1>
<img src="coffee.png" id = "Coffee" alt="coffee image" width="100" height="125"/>
<div id = "bodytext">
<div id = "FirstParagraph">
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa.
Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel
est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta
eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.<br>
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa.
Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel
est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta
eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa.
Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel
est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta
eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.
</div>
<div id = "SecondParagraph">
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa.
Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel
est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta
eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.
<br/>
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa.
Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel
est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta
eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa.
Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel
est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta
eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.
</div>
<div id = "ThirdParagraph">
eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa.
Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel
est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta
eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa.
Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel
est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta
eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.
<br>
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa.
Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel
est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta
eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.
</div>
</div>
<form id = "MainForm">
<label for = "Name">Name: </label>
<input type="text" id = "Name" placeholder = "e.g nirajan basnet" required/>
<label for= "Email">Email</label>
<input type="email" id = "Email" placeholder="sth@sthmail.com" required/>
<label for = "Comment">Your comment: </label>
<br>
<textarea maxlength="100" id = "Comment" placeholder="What do you think about the site?"></textarea>
</form>【讨论】：
您需要做两件事：首先将 css overflow:hidden 提供给 #bodytext，然后将所有 3 个 div 即 FirstParagraph 、 SecondParagraph 、ThirdParagraph 放入 <div class="clear"></div> 和 css 用于明确的类 clear:both。
【讨论】：