3-1 清除浮动
来源：3-1 首页.页面框架代码编写
慕仙8097514
2018-03-21 22:36:39
html部分
<!DOCTYPE html> <html> <head> <title>挂号平台</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/layout.css"> </head> <body> <div id="top" class="top"> <div class="wrap"></div> </div> <div id="header" class="header"> </div> <div id="nav" class="nav"> </div> <div id="banner" class="banner"> <div class="banner-slider"></div> <div class="banner-search"></div> <div class="banner-help"></div> </div> <div id="content" class="content"> <div class="wrap clearfix"> <div class="tab"></div> <div class="news"></div> <div class="close"></div> </div> </div> <div id="footer" class="footer"> </div> </body> </html>
css部分
body{
margin: 0;
padding: 0
}
.wrap{
width: 1000px;
margin: 0 auto;
position: relative;
}
.top{
height: 30px;
background-color: #f5f5f5;
}
.header{
height: 92px;
}
.nav{
height: 36px;
background-color: #60bff2;
}
.banner{
width: 802px;
margin: 0 auto;
height: 414px;
padding: 9px 0 0 198px;
}
.banner-slider{
background-color: #8edff3;
width: 544px;
height: 414px;
float: left;
}
.banner-search{
width: 250px;
height: 255px;
background-color: #eee;
float: right;
}
.banner-help{
width: 250px;
height: 146px;
float: right;
background-color: #ccc;
margin-top: 12px;
}
.content{
}
.tab{
width: 742px;
height: 490px;
float: left;
background-color: #eee;
}
.news,
.close{
width: 248px;
height: 236px;
float: right;
border: 1px solid #ccc;
}
.close{
margin-top: 12px;
border-color: #f00;
}
.clearfix:after{
/*content: ' ';
display: block;
height: 0;
line-height: 0;*/
clear: both;
zoom: 1;
}
.footer{
height: 70px;
padding: 25px 0;
background-color: #eceef2;
}老师，视频里老师说清除浮动的时候，只写clear：both就可以达到效果，但是我试了一下不行啊
还有这个clearfix写样式的时候，后面为什么要加：after啊
还有，我用之前css课程里讲的给父元素添加overflow属性结合zoom：1 也没有效果
.clearfix:after{
/*content: ' ';
display: block;
height: 0;
line-height: 0;
clear: both;
zoom: 1;*/
overflow: hidden;
zoom:1;4回答
-
qq__9987
2018-03-28
增加zoom：1是为了兼容低版本的IE，低版本的IE不支持。
0 -
qq__9987
2018-03-28
使用after的效果就跟在子元素中添加一个空的div，然后给这个div设置clear：both的效果是一样的。
0 -
qq__9987
2018-03-28
老师的意思是说，只写 .clearfix:after{ content:""; display:block; clear:both;}这样就可以了。你把前面的都删除掉肯定不可以啦。
0 -
小丸子爱吃菜
2018-03-22
你的代码以及演示效果比较乱，你说清除浮动没有效果，是哪个部分没有效果？banner区域还是content区域？这个代码要实现的是什么效果？如果是banner区域的的浮动影响后面的话，banner区域本身就设置有高度，不会影响后面的元素。请将问题描述清除。
你上面所说的那个清除浮动的方法，可以看下下面的描述。
使用伪元素来清除浮动(after意思:后来,以后)
.clearfix:after{
content:"";//设置内容为空
height:0;//高度为0
line-height:0;//行高为0
display:block;//将文本转为块级元素
visibility:hidden;//将元素隐藏
clear:both//清除浮动
}
.clearfix{
zoom:1;为了兼容IE
}
祝学习愉快！
0
相似问题