about图片部分用的浮动，为啥清除不了。下面gallery部分总是跑到最前面

HTML代码部分：

</div>

<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>

<form>

</form>

</div>

</div>

</div>

<p>

Lorem Ipsum is simply dummy text of the printing and typesetting<br/>

industry.Lorem Ipsum has been the industry's standard dummy<br/>

text ever since the 1500s.

</p>

</div>

<h2 class="footer-text">A WORD<br/> ABOUT US</h2>

<p>Praesent dignissim viverra est,sed</p>

<p>bibendum liguda commodo?Suspendisse eget</p>

<p>ullamcorper ipsum.Sumspendisse diam amet.</p>

</div>

<p class="footer-r-text2">Students</p>

</div>

<p class="footer-r-text2">Faculty</p>

</div>

</div>

<h3>Library</h3>

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

</p>

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

</p>

</div>

<h3>Computer Lab</h3>

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

</p>

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

</p>

</div>

<h3>Conference Hall</h3>

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

</p>

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

</p>

</div>

<h3>Play Ground</h3>

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

</p>

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

</p>

</div>

</div>

</div>

<p>

Lorem Ipsum is simply dummy text of the printing and typesetting<br/>

industry.Lorem Ipsum has been the industry's standard dummy<br/>

text ever since the 1500s.

</p>

</div>

<div class="gallery-box-text">SCIENCE LAB</div>

</div>

<div class="gallery-box-text">INDOOR STADIUM</div>

</div>

<div class="gallery-box-text">TRANSPORTATION</div>

</div>

</div>

<div class="gallery-box-text">MEDITATION CLASSES</div>

</div>

<div class="gallery-box-text">KIDS PLAY GROUND</div>

</div>

</div>

CSS部分：

margin: 0;

padding: 0;

list-style: none;

text-decoration: none;

font-family:Microsoft YaHei UI;

}

.header{

width:100%;

margin: 0 auto;

height: 80px;

background-color:#07cbc9;

position: fixed;

top: 0;

left: 0;

z-index: 2;

}

.logo{

float: left;

padding-top: 16px;

margin-left: 150px;

}

.nav{

float: right;

margin-right: 100px;

}

.nav li{

display: inline-block;

margin-right:20px;

line-height: 80px;

}

.nav a{

color:#fff;

font-weight: 700;

}

.nav a:hover{

background-color:mediumpurple;

}

.banner{

width: 100%;

height: 500px;

position: relative;

margin-top:80px;

/*给头部加了固定定位,会压住下方图片,这时需要给图片父盒子一个maigin-top值*/

}

.banner img{

width: 100%;

height: 500px;

z-index: 1;

}

.layer{

width: 100%;

height:500px;

background-color: #000;

position: absolute;

top:0;

opacity: 0.1;

}

.input-three,.input-two,.input-one{

border: 2px solid #808080;

background-color:rgba(0,0,0,0);

font-size: 16px;

}

.input-one{

width: 500px;

height: 40px;

}

.input-two{

width: 500px;

height: 120px;

}

.input-three{

width:128px;

height: 42px;

cursor:pointer;

color:#808080;

line-height: 42px;

font-size: 12px;

/*border-radius: 8px;*/

}

.banner-middle{

width: 520px;

height: 300px;

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

}

.banner-middle p{

padding: 5px;

}

.banner-middle input{

padding: 0 10px;

}

.input-three-p{

width:95px;

margin: auto;

/*margin-left: 186px;*/

}

.input-one:hover{

border: 2px solid #07cbc9;

}

.input-two:hover{

border: 2px solid #07cbc9;

}

.input-three:hover{

border: 0;

color: #fff;

background-color:#07cbc9 ;

}

.about{

width:100%;

height: 500px;

}

.title{

width: 100px;

margin: 0 auto;

font-size: 25px;

}

.title h2{

text-align: center;

}

.title span{

border-bottom:2px solid #07cbc9;

}

.quotation{

width: 100%;

/*background-color:yellow;*/

text-align: center;

line-height: 1.5em;

margin-top: 15px;

}

.title-quotation-father{

margin:40px 0;

}

.footer{

width: 100%;

/*background-color: pink;*/

position: relative;

}

.footer img{

width: 600px;

}

.footer-img{

width: 600px;

margin:0 auto;

}

.footer-text{

width:140px;

font-size: 25px;

font-weight: 400;

/*background-color: yellow;*/

text-align: center;

}

.footer-left{

width:370px;

/*background-color: green;*/

padding: 20px;

line-height:1.6em;

font-size: 14px;

border: 1px solid #808080;

background-color: rgba(255,255,255,0.2);

}

.footer-left input{

margin-top:20px;

width: 100px;

height: 40px;

line-height: 40px;

background-color: #000;

border:0;

color: #fff;

}

.footer-left input:hover{

background-color: #000;

opacity: 0.4;

cursor: pointer;

border: 2px solid #000;

}

.tffater{

position: absolute;

top: 38px;

left:260px

}

.footer-r-top,.footer-r-bottom{

width: 238px;

height: 120px;

border: 1px solid #07cbc9;

/*background-color:green;*/

padding-top:40px

}

.footer-r-top{

margin-bottom:40px;

position: absolute;

top: 0;

right: 192px;

}

.footer-r-bottom{

position: absolute;

top: 180px;

right: 192px;

}

.footer-r-text1,.footer-r-text2{

width: 100px;

height: 40px;: ;

margin: 0 auto;

text-align: center;

/*background-color: yellow;*/

padding: 8px;

line-height: 40px;

}

.footer-r-text1{

font-size:25px;

font-weight:700;

}

.footer-r-text1 span{

display: inline-block;

height: 50px;

/*background-color: green;*/

border-bottom: 2px solid #07cbc9;

}

.about-footer{

width: 100%;

min-height: 790px;

/*background-color: pink;*/

margin-top: 80px;

position: relative;

overflow:hidden;

zoom: 1; /*清除浮动,解决浮动后出现的缝隙*/

}

.img1,.about-footer-text{

float: left;

width: 25%;

height: 395px;

}

.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.clearfix {

*zoom: 1;

}

.about-footer-text{

background-color: #07cbc9;

line-height: 1.5em;

}

.about-footer-text h3{

color: #fff;

font-size: 22px;

margin: 20px;

}

.about-footer-text p{

margin: 20px;

}

.about-footer-text input,.about-footer-input{

width: 100px;

height: 40px;

margin:0 auto ;

/*background-color: red;*/

}

.about-footer-text input{

background-color: #000;

border:0;

color: #fff;

}

.about-footer-text input:hover{

background-color: rgb(0,0,0,0.2);

cursor: pointer;

border: 1px solid #000;

}

.about-footer-input{

padding-top: 20px;

}

.about-p1{

color: #F7F2EA;

}

.about-p2{

color: #DDD;

}

.triangle1{

width:0;

height:0;

border-width: 12px 22px 12px 2px;

border-style: solid;

border-color: transparent #07cbc9 transparent transparent;

position: absolute;

top:186px;

left:356px;

}

.triangle2{

width:0;

height:0;

border-width: 12px 22px 12px 2px;

border-style: solid;

border-color: transparent #07cbc9 transparent transparent;

position: absolute;

top:186px;

right:380px;

}

.triangle3{

width:0;

height:0;

border-width: 12px 2px 12px 22px;

border-style: solid;

border-color: transparent transparent transparent #07cbc9;

position: absolute;

top:578px;

left:380px;

}

.triangle4{

width:0;

height:0;

border-width: 12px 2px 12px 22px;

border-style: solid;

border-color: transparent transparent transparent #07cbc9;

position: absolute;

top:578px;

right:356px;

}

.gallery{

width: 100%;

background-color: pink;

}

_TonyStark 2019-06-25

源自：项目：网页布局案例 2-10 作业题

收起

4回答

卡布琦诺回答被采纳获得+3积分 2019-06-26 11:18:26

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="header">
        <div class="logo">
            <a href="2-10.html"><img src="images/logo.png" alt="logo"/></a>
        </div>
        <ul class="nav">
            <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>
    <!--头部完成-->
    <div class="banner">
        <img src="images/banner3.jpg"/>
        <div class="layer"></div>
        <!--给图片加遮罩-->
        <div class="banner-middle">
            <form>
                <p><input type="text" placeholder="your Name" class="input-one" /></p>
                <p><input type="text" placeholder="your Phone" class="input-one" /></p>
                <p><input type="text" placeholder="your E mail" class="input-one" /></p>
                <p><input type="text" placeholder="Write Your Comment Here" class="input-two" /></p>
                <p class="input-three-p"><input type="submit" value="SEND MESSAGE" class="input-three" /></p>
            </form>
        </div>
    </div>
    <!--banner部分完成-->
    <div class="about">
        <div class="title-quotation-father">
            <div class="title">
                <h2>AB<span>O</span>UT</h2>
            </div>
            <div class="quotation">
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting<br />
                    industry.Lorem Ipsum has been the industry's standard dummy<br />
                    text ever since the 1500s.
                </p>
            </div>
        </div>
        <div class="footer">
            <div class="tffater">
                <h2 class="footer-text">A WORD<br/> ABOUT US</h2>
                <div class="footer-left">
                    <p>Praesent dignissim viverra est,sed</p>
                    <p>bibendum liguda commodo?Suspendisse eget</p>
                    <p>bibendum liguda commodo?Suspendisse eget</p>
                    <p>bibendum liguda commodo?Suspendisse eget</p>
                    <p>ullamcorper ipsum.Sumspendisse diam amet.</p>
                    <input value="EXPLORE" type="submit" />
                </div>
            </div>
            <div class="footer-img">
             <img src="images/bb3.jpg"/>
            </div>
            <div class="rightbox">
             <div class="footer-r-top">
                <p class="footer-r-text1">7<span>000</span>0</p>
                <p class="footer-r-text2">Students</p>
            </div>
            <div class="footer-r-bottom">
                <p class="footer-r-text1"><span>600</span></p>
                <p class="footer-r-text2">Faculty</p>
            </div>
            </div>
        </div>
        <!--about上半部分结束-->
        <div class="about-footer clearfix">
         <div class="img1">
         <img src="images/b1.jpg"/>
         </div>
            <!-- <div class="triangle1"></div> -->
            <!--三角形-->
            <div class="about-footer-text triangle1">
                <h3>Library</h3>
                <p class="about-p1">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                </p>
                <p class="about-p2">
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                </p>
                <div class="about-footer-input"><input type="submit" value="EXPLORE" /></div>
            </div>
            <div class="img1">
             <img src="images/b2.jpg"/>
            </div>
            <!-- <div class="triangle2"></div> -->
            <!--三角形-->
            <div class="about-footer-text triangle1">
                <h3>Computer Lab</h3>
                <p class="about-p1">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                </p>
                <p class="about-p2">
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                </p>
                <div class="about-footer-input"><input type="submit" value="EXPLORE" /></div>
            </div>
            <div class="about-footer-text triangle2">
                <h3>Conference Hall</h3>
                <p class="about-p1">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                </p>
                <p class="about-p2">
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                </p>
                <div class="about-footer-input"><input type="submit" value="EXPLORE" /></div>
            </div>
            <div class="img1">
             <img src="images/b3.jpg"/>
            </div>
            <!-- <div class="triangle3"></div> -->
            <!--三角形-->
            <div class="about-footer-text triangle2">
                <h3>Play Ground</h3>
                <p class="about-p1">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                </p>
                <p class="about-p2">
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                </p>
                <div class="about-footer-input"><input type="submit" value="EXPLORE" /></div>
            </div>
            <div class="img1">
             <img src="images/b4.jpg"/>
            </div>
            <!-- <div class="triangle4"></div> -->
            <!--三角形-->
        </div>
    </div>
    <!--about 下半部分结束-->
    <div class="gallery">
        <div class="gallery-h2"><h2>GA<span>LL</span>ERY</h2>
        </div>
        <div class="gallery-text">
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting<br />
                industry.Lorem Ipsum has been the industry's standard dummy<br />
                text ever since the 1500s.
            </p>
        </div>
        <div class="gallery-box">
            <img src="images/03-01.jpg"/>
            <div class="gallery-box-text">SCIENCE LAB</div>
        </div>
        <div class="gallery-box">
            <img src="images/03-02.jpg"/>
            <div class="gallery-box-text">INDOOR STADIUM</div>
        </div>
        <div class="gallery-box">
            <img src="images/03-03.jpg"/>
            <div class="gallery-box-text">TRANSPORTATION</div>
        </div>
        <div class="gallery-box">
            <img src="images/03-04.jpg"/>
            <div class="gallery-box-text">KIDS ROOM</div>
        </div>
        <div class="gallery-box">
            <img src="images/03-05.jpg"/>
            <div class="gallery-box-text">MEDITATION CLASSES</div>
        </div>
        <div class="gallery-box">
            <img src="images/03-06.jpg"/>
            <div class="gallery-box-text">KIDS PLAY GROUND</div>
        </div>
    </div>
    <!--gallery部分结束-->
</body>

</html>

收起回答

卡布琦诺 2019-06-26 11:18:11

*{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
	font-family:Microsoft YaHei UI;
}
.header{
	width:100%;
	/*margin: 0 auto;*/
	height: 80px;
	background-color:#07cbc9;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
}
.logo{
	float: left;
	padding-top: 16px;
	margin-left: 150px;
}
.nav{
	float: right;
	margin-right: 100px;
}
.nav li{
	/*display: inline-block;*/
	float:left;
	margin-right:20px;
	line-height: 80px;
}
/*添加如下代码，否则鼠标经过导航时背景色高度不够*/
.nav li a{
	display:block;
	float:left;
	color:#fff;
	font-weight: 700;
}
.nav a:hover{
	background-color:mediumpurple;
}
.banner{	
	width: 100%;
	height: 500px;
	position: relative;
	margin-top:80px;
	/*给头部加了固定定位,会压住下方图片,这时需要给图片父盒子一个maigin-top值*/
}
.banner img{
	width: 100%;
	height: 500px;
	z-index: 1;
}
.layer{
	width: 100%;
	height:500px;
	background-color: #000;
	position: absolute;
	top:0;
	opacity: 0.1;
}
.input-three,.input-two,.input-one{
	border: 2px solid #808080;
	background-color:rgba(0,0,0,0);
	font-size: 16px;
}
.input-one{
	width: 500px;
	height: 40px;
}
.input-two{
	width: 500px;
	height: 120px;
}
.input-three{
	width:128px;
	height: 42px;
	cursor:pointer;
	color:#808080;
	line-height: 42px;
	font-size: 12px;
	/*border-radius: 8px;*/
}
.banner-middle{
	width: 520px;
	height: 300px;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
.banner-middle p{
	padding: 5px;
}
.banner-middle input{
	padding: 0 10px;
}
.input-three-p{
	width:95px;
	margin: auto;
	/*margin-left: 186px;*/
}
.input-one:hover{
	border: 2px solid #07cbc9;
}
.input-two:hover{
	border: 2px solid #07cbc9;
}
.input-three:hover{
	border: 0;
	color: #fff;
	background-color:#07cbc9 ;
}
.about{
	width:100%;
	/*这里不需要设置高度，让高度有内容撑开即可，否则高度过低，会导致后面的内容显示在上面*/
	/*height: 500px;*/
} 
.about .title{
	width: 100px;
	margin: 0 auto;
	font-size: 25px;
}
.about .title h2{
	text-align: center;
}
.about .title span{
	border-bottom:2px solid #07cbc9;
}
.about .quotation{
	width: 100%;
	/*background-color:yellow;*/
	text-align: center;
	line-height: 1.5em;
	margin-top: 15px;
}
.about .title-quotation-father{
	margin:40px 0;
}
.about .footer{
	/*width: 100%;*/
	width:1160px;
	/*background-color: pink;*/
	/*position: relative;*/
	margin:0 auto;
}
/*左侧*/
.tffater{
	width:370px;
	float:left;
	position:relative;
	left:100px;
}
.footer-text{
	width:140px;
	font-size: 25px;
	font-weight: 400;
	/*background-color: yellow;*/
	text-align: center;
}
.footer-left{
	width:370px;
	/*background-color: green;*/
	padding: 20px;
	line-height:1.6em;
	font-size: 14px;
	border: 1px solid #808080;
	background-color: rgba(255,255,255,0.2);
}
.footer-left input{
	margin-top:20px;
	width: 100px;
	height: 40px;
	line-height: 40px;
	background-color: #000;
	/*border:0;*/
	/*要设置默认边框，否则鼠标经过时会发生抖动*/
	border: 2px solid #000;
	color: #fff;
}
.footer-left input:hover{
	/*background-color: #000;*/
	/*opacity: 0.4;*/
	/*按钮在鼠标经过的时候是全透明的，可以使用transparent*/
	background: transparent;
	color:#000;
	cursor: pointer;
	border: 2px solid #000;
}
/*.footer img{
	width: 600px;
}*/
.footer-img{
	width: 530px;
	float:left;
	/*margin:0 auto;*/
}
.footer-img img{
	width:100%;
}
/*.tffater{
	position: absolute;
	top: 38px;
	left:260px;
}*/
.rightbox{
	width: 240px;
	float:right;
}
.footer-r-top,.footer-r-bottom{
	width: 238px;
	height: 120px;
	border: 1px solid #07cbc9;
	/*background-color:green;*/
	/*padding-top:40px*/
	padding-top:40px;
}
.footer-r-bottom{
	margin-top:10px;
}
/*.footer-r-top{
	margin-bottom:40px;
	position: absolute;
	top: 0;
	right: 192px;	
}
.footer-r-bottom{
	position: absolute;
	top: 180px;
	right: 192px;	
}*/
.footer-r-text1,.footer-r-text2{
	width: 100px;
	height: 40px;: ;
	margin: 0 auto;
	text-align: center;
	/*background-color: yellow;*/
	padding: 8px;
	line-height: 40px;
}
.footer-r-text1{
	font-size:25px;
	font-weight:700;
}
.footer-r-text1 span{
	display: inline-block;
	height: 50px;
	/*background-color: green;*/
	border-bottom: 2px solid #07cbc9;
}
.about-footer{
	width: 100%;	
	min-height: 790px;
	/*background-color: pink;*/
	margin-top: 80px;
	position: relative;
	overflow:hidden;	
	zoom: 1;/*清除浮动,解决浮动后出现的缝隙*/
}
.img1,.about-footer-text{
	float: left;
	width: 25%;
	height: 395px;
}
/*需要设置图片宽度100%显示*/
.img1 img{
	width:100%;
}
.clearfix::after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	*zoom:1;
}
.about-footer-text{
	background-color: #07cbc9;
	line-height: 1.5em;
	position:relative;
}
.about-footer-text h3{
	color: #fff;
	font-size: 22px;
	margin: 20px;
}
.about-footer-text p{
	margin: 20px;
}
.about-footer-text  input,.about-footer-input{
	width: 100px;
	height: 40px;
	margin:0 auto ;
	/*background-color: red;*/
}
.about-footer-text  input{
	background-color: #000;
	border:0;
	color: #fff;
}
.about-footer-text  input:hover{
	/*background-color: rgb(0,0,0,0.2);*/
	/*鼠标经过背景色全透明*/
	background:transparent;
	cursor: pointer;
	border: 1px solid #000;
}
.about-footer-input{
	padding-top: 20px;
}
.about-p1{
	color: #F7F2EA;
}
.about-p2{
	color: #DDD;
}
/*使用伪元素实现三角形，保证在不同分辨率的电脑下，三角与文字区域不会分离*/
.triangle1::before{
	content:"";
	width:0;
	height:0;
	border-width: 12px 22px 12px 2px;   
	border-style: solid;
	border-color: transparent #07cbc9 transparent transparent;
	position: absolute;
	top:186px;
	left:-24px;
}
.triangle2::after{
	content:"";
	width:0;
	height:0;
	border-width: 12px 2px 12px 22px;
	border-style: solid;
	border-color: transparent transparent transparent #07cbc9;
	position: absolute;
	top:186px;
	right:-24px;
}
/*.triangle3{
	width:0;
	height:0;
	border-width: 12px 2px 12px 22px;
	border-style: solid;
	border-color: transparent transparent transparent #07cbc9;
	position: absolute;
	top:578px;
	left:380px;
}
.triangle4{
	width:0;
	height:0;
	border-width: 12px 2px 12px 22px;
	border-style: solid;
	border-color: transparent transparent transparent #07cbc9;
	position: absolute;
	top:578px;
	right:356px;
}*/
.gallery{
	width: 100%;
	background-color: pink;
	/*清除浮动对自己的影响*/
	clear:both;
}

收起回答

卡布琦诺 2019-06-25 19:08:17

建议同学尝试设置如下尝试一下：

希望可以帮到你！

收起回答

提问者 _TonyStark #1

老师你好，我试过了，不行。直接给gallery定义就行还是配合清除浮动一起使用？我删掉清除浮动，直接定义的

2019-06-25 20:48:57
卡布琦诺回复提问者 _TonyStark #2

清除浮动gallery依然显示在上方是因为同学给about设置的高度过低导致的，建议去掉about设置的高度，让内容自动撑开高度即可，另外，布局上和css代码还有一些不太合理，老师也帮你进行了调整，具体看上面的代码和注释哦

2019-06-26 11:17:56