父元素不跟随子元素

Question

当我们设置父元素并增加子元素的内容时，父元素的大小不应该自动缩放以适合子元素吗？

相比之下，应用了 css 属性（例如给它的背景）的父级不会为父级缩放。这是我创建一个 3 列简单布局的尝试，父级未缩放，因此未应用边框底部：

如您所见，内容溢出了父级，所有内容都没有包含在父级中。我应该如何解决这个问题？

Answer 1

你需要的是 #bodytext 的 clearfix，因为你的所有内容都是浮动的。

将以下行添加到您的 #bodytext:

#bodytext{
  overflow: auto;
}

为了更好地理解为什么需要 clearfix，read this answer。

Answer 2

您可以使用 display:inline-block:

#bodytext {

    display:inline-block;

}

Answer 3

你需要做两件事：首先把 css overflow:hidden 给 #bodytext 第二个是 3 div 即 FirstParagraph , SecondParagraph ,ThirdParagraph 你把 <div class="clear"></div> 和 css 清除 class clear:both.

Answer 4

只需在 #bodytext div 中使用 float:left 即可解决此问题，请查看下面的代码段..

@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>

Answer 5

您没有正确清除 floats - 添加 overflow: hidden 到 bodyText 或添加一个 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>

父元素不跟随子元素

parent element not following child element

html

css

css-float