CSS中解决父布局塌陷问题

CSS中解决父布局塌陷问题

       因为子元素浮动后，会脱离文档流。导致子元素无法撑起父元素的高度，造成父元素高度塌陷（父元素占据子元素原来的位置，此时父元素也没有设置高度，没有内容撑开父级高度）
起始状态

<style type="text/css">
			#div_01{
   
				background-color: antiquewhite;
			}
			#div_02{
   
				height: 100px;
				width: 100px;
				background-color: red;
			}
			#div_03{
   
				height: 100px;
				width: 100px;
				background-color: aqua;
			}
		</style>

<div id="div_01">
			<div id="div_02"></div>
			<div id="div_03"></div>
		</div>

子元素浮动后，造成父布局塌陷：

<style type="text/css">
			#div_01{
   
				background-color: antiquewhite;
			}
			#div_02{
   
				height: 100px;
				width: 100px;
				background-color: red;
			}
			#div_03{
   
				float: left;    
				height: 100px;
				width: 100px;
				background-color