父DIV高度塌陷，使用空DIV设置clear:both，在父DIV设置overflow:hidden
来源：4-3 项目作业
weixin_慕九州5516890
2019-11-21 09:29:56
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>imooc</title>
<link rel="stylesheet" type="text/css" href="../css/index.css">
<script type="text/javascript" src="../js/index.js"></script>
</head>
<body>
<div class="title">
<div class="logo">
<img src="../images/logo.png">
</div>
<div class="title_btn">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">FACULTY</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<div class="empty"></div>
</div>
</div>
<div class="banner">
<div class="banner_image">
<img src="../images/banner3.jpg" height="400" width="100%">
</div>
<div class="banner_form">
<form>
<input type="text" class="banner_text" placeholder="your Name"> <br>
<input type="text" class="banner_text" placeholder="your Phone"> <br>
<input type="text" class="banner_text" placeholder="your Email"> <br>
<input type="text" class="banner_text_1" placeholder="Write Your Comment Here"> <br>
<input type="button" class="banner_button" value="SEND MASSAGE">
</form>
</div>
<div style="clear:both"></div>
</div>
<div class="about">
<div class="about_top">
<h2>About</h2>
<p>Lorem Ipsum is simply dummy text of
the printing and typesetting industry.Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.</p>
</div>
<div class="about_mid"></div>
<div class="about_dowm"></div>
</div>
</body>
</html>
/*
*{
margin:0px;
padding:0px;
font-family:Microsoft YaHei UI;
}
a{
text-decoration:none;
color:#FFF;}
.title{
width:100%;
height:50px;
line-height:50px;
background-color:#07cbc9;
}
.title .logo {
height:50px;
float:left;
overflow:hidden;}
.title .title_btn ul li{
float:right;
overflow:hiddenl;
list-style:none;
margin-right:30px;}
.title .title_btn ul li:hover{
background-color:#000;}
.empty{
clear:both;}
.banner {
overflow:hidden;}
.banner .banner_image{
float:left;
position:absolute;
z-index:0;
}
.banner .banner_form{
width:100%;
float:left;
position:absolute;
z-index:100;
}
.banner .banner_form .banner_text{
width:500px;
height:25px;
margin-top:25px;
}
.banner .banner_form .banner_text:hover{
border-color:#07cbc9;}
.banner .banner_form .banner_text_1{
width:500px;
height:75px;}
.banner .banner_form .banner_text_1:hover{
border-color:#07cbc9;}
.banner .banner_form form input{
margin-top:35px;
margin-left:528px;
margin-right:528px;
background-color:#000;
opacity:0.4;
color:#FFF;
}
.banner .banner_form .banner_button{
margin-left:700px;}
.banner .banner_form .banner_button:hover{
border:none;
background:#07cbc9;}
.about{
width:100%;
float:left;}
.about .about_top{
margin:30px auto;}
*/
2回答
-
同学，你好。同学给图片所在div设置了绝对定位，脱离正常文档流，并且与浮动元素不在一个定位流中，清除浮动只会清除float所产生的影响有作用。同学去掉绝对定位就可以了。
如果我的回答解决了您的疑惑，请采纳！祝学习愉快~~~~
0 -
weixin_慕九州5516890
提问者
2019-11-21
都没有撑起父DIV 高度
0
相似问题
回答 2