内部 div 超出其外部主 div [重复]答案

【问题标题】：Inner div go outside its outer the main div [duplicate]内部 div 超出其外部主 div [重复]
【发布时间】：2018-06-03 14:15:10
【问题描述】：

我的主 div 中有三个 div。但是一个 div 在主 div 之外。我不明白，怎么会发生这样的事情？

如果有人可以帮助我..... ...我将非常感激 =)

.test1{
		width: 1000px;
		height: 200px;
		background-color: yellow;
		margin:auto;
	}
	
	.test6{
		width: 700px;
		height: 100px;
		background-color: black;
		float: left;
	}
		.test7{
		width: 700px;
		height: 100px;
		background-color: pink;
		float: left;
	}
		.test8{
		width: 300px;
		height: 200px;
		background-color: green;
		float: left;
	}

<div class="test1">
		<div class="test6">
		</div>
		<div class="test7">
		</div>
		<div class="test8">
		</div>	
	</div>

【问题讨论】：

得到解决方案：将<div class="test8"> 元素更改为overflow: auto; 而不是float:left;

标签： html css

【解决方案1】：

您必须更改<div class="test8"> 元素的顺序并将其更改为float:right 而不是float:left。试试这个代码。

<div class="test1">
  <div class="test8">
  </div>
  <div class="test6">
  </div>
  <div class="test7">
  </div>
</div>

.test1 {
  width: 1000px;
  height: 200px;
  background-color: yellow;
  margin: auto;
}

.test6 {
  width: 700px;
  height: 100px;
  background-color: black;
  float: left;
}

.test7 {
  width: 700px;
  height: 100px;
  background-color: pink;
  float: left;
}

.test8 {
  width: 300px;
  height: 200px;
  background-color: green;
  float: right;
}

【讨论】：