类为liebuju的元素高度坍塌，解决高度坍塌的四种方法都试过，没用，怎么解决

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.hangbuju{
			width: 100%;
			height: auto;
			
		}

		.header{
		  width: 100%;/*自适应*/
		  height: 50px;
		  background-color: black;
		
		  color: white;
		  text-align: center;
		  line-height: 50px;
		}

		.banner{
			width: 100%;
			height: 400px;
			background-color: green;
			text-align: center;
			padding-top:50px;
		}

		.content{
			width: 800px;/*固定宽*/
			height: 1000px;
			background-color: yellow;
			margin: 0 auto;
			text-align: center; 
		}

		.footer{
			width: 100%;
			height: 50px;
			color: white;
			text-align: center;
			line-height: 50px;
			background-color: black;
		}

		.liebuju{
			width: 100%;
			height: 1000px;
			padding-top: 50px;
			float: left;
		}

		.left{
			width: 25%;
			height: 1000px;
			float: left;
			background-color: red;
		}

		.middle{
			width: 50%;
			height: 1000px;
			float: left;
			background-color: blue;
		}

		.right{
			width: 25%;
			height: 1000px;
			background-color: green;
			float: right;

		}
	</style>
</head>
<body>
	<div class="hangbuju">
		<div class="header">三行布局</div>
		<div class="banner">banner</div>
		<div class="content">内容区</div>
		<div class="footer">foot</div>
	</div>
	<div style="clear: both;"></div>
	<!--自适应三列布局-->
	<div class="liebuji">
		<div class="left"></div>
		<div class="middle"></div>
		<div class="right"></div>
	</div>
	<div style="clear: both;"></div>
</body>
</html>
慕容0347852
浏览 754回答 1
1回答

随时随地看视频慕课网APP