html解决父元素塌陷问题

方法1：给塌陷的父元素的最后添加一个没有意义的子容器
both：清除所有。也可以只清除left/right，但是一般清除所有

.clearDiv {
  clear: both;//清除所有（也可以只清除左或者右）
}
.left{
	float:left;
}
.right{
	float:right;
}



<div>
	<div class=left></div>
	<div class=right></div>
	//添加的没有意义的子容器
	<div class=".clearDiv"></div>
</div>

方法2：给塌陷的父元素设置overflow:hidden(溢出隐藏)的属性，因为会触发BFC。

#mydiv{
overflow:hidden;
}
.left{
	float:left;
}
.right{
	float:right;
}



<div id="mydiv">
	<div class=left></div>
	<div class=right></div>
</div>

方法3：给塌陷的父元素清除浮动（常用）

.clear::after {
  content: "";//content内容为空
  display: block;//将这个内容content转化成块元素
  clear: both;//清除浮动
}
.left{
	float:left;
}
.right{
	float:right;
}



<div class="clear">
	<div class=left></div>
	<div class=right></div>
</div>