老师 这个为什么我的浮动清楚没起作用 下面的图片还是跑到about中间部分去了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-family: Microsoft YaHei UI;
}
.head{
width: 100%;
height: 80px;
position: fixed;
top: 0;
background-color: #07cbc9;
overflow: hidden;
zoom:1;
display: block;
}
.head .logo{
width: 260px;
height: 48px;
position: relative;
top: 16px;
float: left;
}
.daohan ul{
height: 80px;
list-style: none;
float: right;
margin-right: 50px;
}
.head .daohan li{
float: left;
color: white;
margin-left: 50px;
line-height: 80px;
}
.banner{
margin-top: 80px;
width: 100%;
height: 500px;
}
.banner img{
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.8;
z-index: 1;
}
.banner .regin{
width: 509px;
height: 391px;
text-align: center;
position: absolute;
top: 135px;
left: 50%;
margin-left: -254px;
z-index: 2;
}
.regin .text{
border: 2px;
border-style: solid;
width: 505px;
height: 39px;
border-color:white;
margin-top: 20px;
background: none;
}
.regin .textarea{
border: 2px;
border-style: solid;
border-color: white;
width: 505px;
height: 115px;
margin-top: 20px;
background: none;
}
.regin .button{
border: 2px;
border-style: solid;
border-color: white;
width: 123px;
height: 39px;
margin-top: 20px;
background: none;
}
.about{
text-align: center;
width: 100%;
height: auto;
min-width: 700px;
overflow: hidden;
zoom:1;
}
.about .top h1{
position: relative;
margin-top: 40px;
}
.about hr{
width: 40px;
border-color:#07cbc9;
}
.about .top hr{
position: relative;
left: 50%;
margin-left: -20px;
margin-top: 10px;
margin-bottom: 10px;
}
.about .top p{
color: #C0C0C0;
margin-bottom: 20px;
}
.about .aboutmid{
width:1400px;
margin:0 auto;
float: left;
overflow: hidden;
zoom:1;
min-width: 800px;
position: relative;
left: 50%;
margin-left: -700px;
}
.about .aboutmid .left{
width: 300px;
height: 400px;
float: left;
}
.about .aboutmid .left .word{
border: 1px solid #C0C0C0;
width: 300px;
height: 210px;
padding: 20px;
text-align: left;
background:rgba(255,255,255,0.5);
position: absolute;
top:100px;
left: 80px;
}
.about .aboutmid .left h1{
margin-left: 50px;
margin-top: 10px;
}
.about .aboutmid .left .word button{
color:white;
background:black;
width:102px;
height:45px;
border:1px solid #000;
margin-top: 20px;
}
.about .aboutmid .middle{
width: 650px;
height: 435px;
float: left;
margin:0 auto;
}
.about .aboutmid .right{
width: 238px;
height: 400px;
float: right;
position: relative;
right: 180px;
}
.about .aboutmid .right .student ,.faculty{
border: 1px solid #07cbc9;
height: 104px;
width: 238px;
padding: 20px 0;
font-size: 20px;
}
.about .aboutmid .right .student p{
margin-top: 20px;
}
.about .aboutmid .right .faculty p{
margin-top: 20px;
}
.about .aboutmid .right .faculty{
margin-top: 30px;
}
.about .aboutmid .right hr{
position: relative;
left: 50%;
margin-left: -20px;
margin-top: 20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="all">
<div class="head">
<div class="logo">
<img src="images/logo.png"></div>
<div class="daohan">
<ul>
<li>CONTACT</li>
<li>EVENTS</li>
<li>FACULTY</li>
<li>GALLERY</li>
<li>ABOUT</li>
<li>HOME</li>
</ul>
</div>
</div>
<div class="banner">
<img src="images/banner3.jpg">
<div class="regin">
<form>
<tr><input type="text" class="text" name="one" placeholder="your Name"> </tr>
<br/>
<tr><input type="text" class="text" name="two" placeholder="your Phone"></tr>
<br/>
<tr><input type="text" class="text" name="three" placeholder="your Email"></tr>
<br/>
<tr><textarea class="textarea" name="textarea" placeholder="Write your Commeat here"></textarea></tr>
<br/>
<tr><button class="button">SEND MESSAGE </button></tr>
</form>
</div>
</div>
<div class="about">
<div class="top">
<h1>ABOUT</h1>
<hr>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting</br> industry.Lorem Ipsum has been the indsustry's standard dummy </br>text ever since the 1500s.</p>
</div>
<div class="aboutmid">
<div class="left">
<h1>A WORD</br/>ABOUT US</h1>
<div class="word">
<p>Praesent dignissim viverra est,sed</br>bibendum ligula congue non,Sed ac nisl</br>et felis gravida commodo?Suspendisse</br>eget ullamcorper ipsum.Suspendisse</br> diam amet.</p>
<div><button>EXPLORE</button></div>
</div>
</div>
<div class="middle">
<img src="images/bb3.jpg">
</div>
<div class="right">
<div class="student">
<h2>70000</h2><hr><p>Students</p>
</div>
<div class="faculty">
<h2>600</h2>
<hr>
<p>Faculty</p>
</div>
</div>
</div>
<div class="aboutbottom">
<div><img src="images/b1.jpg"></div>
<div><img src="images/b2.jpg"></div>
<div><img src="images/b3.jpg"></div>
<div><img src="images/b4.jpg"></div>
</div>
</div>
<div class="gallery"></div>
</div>
<div class="foot"></div>
</div>
</body>
</html>
正在回答
同学你好， 因为你为aboutmid设置overflow属性清除子元素浮动的影响后， 又给aboutmid设置了左浮动，脱离了文档流， 导致下面的图片跑到中间部分。建议参考下图修改：去除左浮动
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星