右浮动但是另起一行

/*
clear:left:左侧不允许浮动
clear:right:右侧不允许浮动
clear:both:两侧不允许浮动
*/
div {
	float: left;
	clear: both;
}

父边框塌陷解决办法

1、增加父元素高度（不推荐）

div {
	border: 1px #000 solid;
	height: 800px;
}

2、父边框所有子元素最后面增加一个空的div，清除浮动（尽量避免空div）

<div class="clear"></div>
.clear {
	clear: both;
	margin: 0;
	padding: 0;
}

3、在父级元素中增加overflow: hidden;（下拉场景避免使用）

/*
overflow: hidden;如果元素有高度，超出高度隐藏，没有高度，自动被子元素撑起来
*/
<div class="father"></div>
#father {
	overflow: hidden;
}

4、父级元素添加一个伪类（避免添加空div，没有副作用，最常用）

<div class="father"></div>
#father:after {
	content: "";
	display: block;
	clear: both;
}

对比

display: 方向不可控制

float: 浮动起来会脱离标准文档流，需要解决父级元素塌陷问题