当我们设置父元素并递增子元素的内容时，父元素的大小不应该自动缩放以适应子元素吗？
相反，应用了 css 属性(例如为其提供的背景(的父级不会为父级缩放。这是我尝试创建一个 3 列简单布局，并且父级不缩放，因此未应用边框底部：
REPL.IT
如您所见，内容溢出父级，并且所有内容都没有包含在父级中。我应该如何解决这个问题？
您需要的是#bodytext上的明确修复，因为您的所有内容都是浮动的。
将以下行添加到您的#bodytext：
#bodytext{
overflow: auto;
}
为了更好地理解为什么你需要一个明确的修复，请阅读这个答案。
您尚未正确清除floats- 将overflow: hidden添加到bodyText或添加使用clear: left的after元素：
#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;
}
只需在div 中使用float:left即可解决此问题#bodytext请查看下面的代码段。
@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>你需要做两件事：首先给 cssoverflow:hidden给#bodytext，然后是所有 3 个div，即第一段、第二段、第三段你放<div class="clear"></div>和 css 以明确类clear:both。