儿童div从父母div出来

Question

父.container（粉红色）div不会根据子div的内容垂直展开.red因此，.red div垂直向下流出.content div！

我尝试通过将内容div的高度从“100％”设置为“auto”来纠正此问题，但是当我这样做时，.top和.container div都会完全消失。这是为什么？？什么是最好的解决方案，不包括“溢出”

请参阅截图：

CSS

html, body {
width: 100%;
left: 0px;
top: 0px;
margin: 0px;
height: 100%;

}



.container {
width: auto;
float: none;
width: auto;
max-width: auto;
position: relative;
background-color: rgba(216,86,112,0.5);
height: 100%;
margin-top: auto;
margin-right: 5%;
margin-left: 5%;
display: block;
}




.top {
width: 100%;
background-color: rgba(204,51,0,1);
height: 10%;
position: relative;
margin: 0px;
text-align: center;
}

.left {
float: left;
height: auto;
width: 32.33%;
background-color: rgba(255,0,0,1);
margin-right: auto;
position: relative;
margin-left: auto;
}

.center {
float: left;
height: auto;
width: 32.33%;
background-color: rgba(0,255,0,1);
margin-left: 1.5%;
margin-right: auto;
position: relative;
}

.right {
float: right;
height: auto;
width: 32.33%;
background-color: rgba(0,0,255,1);
margin-left: auto;
margin-right: auto;
position: relative;
text-align: center;
display: block;
}

HTML

<div class="container">

<div class="top">
</div>

<div class="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a 
libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a 
libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a 
libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a 
libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a 
libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a 
libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a 
libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a 
libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
</div>

<div class="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a   
libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
</div>

<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis 
dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a 
libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.

</div>
</div>

Answer 1

您可以在容器中添加clearfix类，并移除height:100%

的CSS中的container

以下是Demo

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }

Answer 2

在“右”div之后和关闭容器div之前添加此“clear”div。

<div style="clear: both ;" ></div>

Answer 3

如何删除此内容：

  

float：none;

{p> .container

我认为你根本不需要任何position: relative。