给.riqi的父元素清除浮动后，为什么还是高度塌陷？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>6-8</title>
<link rel="stylesheet" type="text/css" href="css/6-8.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/6-8.js"></script>
</head>
<body>
<!-- top区 -->
<div class="top">
<div class="wrap">
<p class="call">010-114/116114电话预约</p>
<p class="welcome">欢迎来到城市医院预约挂号统一平台 请 <a href="#">登录</a> <a href="">注册</a> <a href="">帮助中心</a></p>
</div>
</div>
<!-- header区 -->
<div class="header">
<div class="wrap clearfix">
<a href="#" class="logo"><img src="http://img1.sycdn.imooc.com/climg//58c61b2f0001f5c008400172.png"></a>
<div class="search ui-search">
<div class="ui-search-selected">医院</div>
<div class="ui-search-selected-list">
<a href="#">科室</a>
<a href="#">医院</a>
<a href="#">疾病</a>
</div>
<input type="text" name="search-content" class="ui-search-input" placeholder="请输入搜索内容">
<a href="#" class="ui-search-submit"> </a>
</div>
</div>
</div>
<!-- nav区 -->
<div class="nav">
<div class="wrap clearfix">
<a href="#">首页</a>
<a href="#">按医院挂号</a>
<a href="#" class="keshi">按科室挂号</a>
<a href="#">按疾病挂号</a>
<a href="#">最新公告</a>
<a href="#" class="right">社会知名医院</a>
</div>
</div>
<!-- 医院简介区 -->
<div class="jianjie">
<div class="wrap clearfix">
<div class="shang">
<span class="xiehe">北京协和医院</span>
<a href="#">关注医院</a>
<div class="dengji2">
<span class="dengji">等级：</span>
<span class="dengji1">三级甲等</span>
<span class="dengji">区域：</span>
<span class="dengji1">东城区</span>
<span class="dengji">分类：</span>
<span class="dengji1">中国医科院所属医院</span>
</div>
</div>
<div class="xia">
<img src="图片素材/hospital-1.jpg" class="sucai1">
<span>[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓胡同41号</span>
<span>http://www.pumch.cn/</span>
<span>东院咨询台：010-69155564;西院咨询台：010-69158010</span>
<span>东院：106,108,110,111,116,684,685到东单路口北; 41,104快.814到东单路口南; 1,52,728,802到东单路口西; 20,25,37,39到东单路口东；<br>103,104,420,803到新东安市场；地铁1、5号线到东单。西院：68到薛才胡同东口；<br>更多乘车路线仙剑须知</span>
<img src="图片素材/map-1.png" class="sucai2">
</div>
</div>
</div>
<!-- 科室排班区 -->
<div class="paiban">
<div class="wrap clearfix">
<div class="paibannav">
<a href="#" class="active">预约挂号</a>
<a href="#">医院介绍</a>
<a href="#">预约须知</a>
<a href="#">停诊信息</a>
<a href="#">查询取消</a>
</div>
<div class="wrap clearfix wrap1">
<div class="yuyueguahao clearfix">
<div class="kaifang">开放预约科室</div>
<div class="zhuanke">2301</div>
<div class="teshu">
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
</div>
<div class="zhuanke">专科</div>
<div class="teshu">
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
</div>
<div class="zhuanke">内科</div>
<div class="teshu">
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
</div>
<div class="zhuanke">内科</div>
<div class="teshu teshu1">
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
<a href="#">特殊门诊科</a>
</div>
</div>
<div class="yuyueguize">
<div class="guize">
预约规则<span>（更新时间每日8：30更新）</span>
</div>
<div class="guizeneirong">
<div class="zhouqi">
<span class="yuyuezhouqi">预约周期：</span>
<span class="qitian">七天</span>
</div>
<div class="zhouqi">
<span class="yuyuezhouqi">放号时间：</span>
<span class="qitian">8:30</span>
</div>
<div class="zhouqi">
<span class="yuyuezhouqi">停挂时间：</span>
<span class="qitian">下午14:00停止次日预约挂号<br> （周五14：00后挺挂至下周一）</span>
</div>
<div class="zhouqi">
<span class="yuyuezhouqi">退号时间：</span>
<span class="qitian">就诊前一天工作日14:00前取消</span>
</div>
<div class="zhouqi zhouqi1">
<span class="yuyuezhouqi">特殊规则：</span>
<span class="qitian"><br> ①就诊前一天工作日14:00前取消<br> 就诊前一天工作日14:00前取消就<br> 诊前一天工作日14:00前取消就诊<br> 前一天工作日14:00前取消就诊前<br> 一天工作日14:00前取消就诊前一<br> 天工作日14:00前取消就诊前一天<br> 工作日14:00前取消就诊前一天工<br> 作日14:00前取消就诊前一天工作<br> 日14:00前取消就诊前一天工作日<span>
</div>
</div>
</div>
</div>
<div class="wrap clearfix wrap2">
<div class="fanhui">科室排班表 <span><a href="#">返回科室列表</a></span></div>
<div class="left schedule_main clearfix">
<div class="schedule_tool_left">
<div class="date"><a href="#" class="icon"></a></div>
<div class="status">上午</div>
<div class="status">下午</div>
<div class="status">晚上</div>
</div>
<div class="schedule_box">
<div class="schedule_box_wrap clearfix" id="schedule_box_wrap">
<!-- js动态生成排班表 -->
</div>
</div>
<div class="schedule_tool_right">
<div class="date"><a href="#" class="icon icon1"></a></div>
<div class="status"></div>
<div class="status"></div>
<div class="status"></div>
</div>
</div>
<div class="yuyueguize">
<div class="guize">
预约规则<span>（更新时间每日8：30更新）</span>
</div>
<div class="guizeneirong">
<div class="zhouqi">
<span class="yuyuezhouqi">预约周期：</span>
<span class="qitian">七天</span>
</div>
<div class="zhouqi">
<span class="yuyuezhouqi">放号时间：</span>
<span class="qitian">8:30</span>
</div>
<div class="zhouqi">
<span class="yuyuezhouqi">停挂时间：</span>
<span class="qitian">下午14:00停止次日预约挂号<br> （周五14：00后挺挂至下周一）</span>
</div>
<div class="zhouqi">
<span class="yuyuezhouqi">退号时间：</span>
<span class="qitian">就诊前一天工作日14:00前取消</span>
</div>
<div class="zhouqi zhouqi1">
<span class="yuyuezhouqi">特殊规则：</span>
<span class="qitian"><br> ①就诊前一天工作日14:00前取消<br> 就诊前一天工作日14:00前取消就<br> 诊前一天工作日14:00前取消就诊<br> 前一天工作日14:00前取消就诊前<br> 一天工作日14:00前取消就诊前一<br> 天工作日14:00前取消就诊前一天<br> 工作日14:00前取消就诊前一天工<br> 作日14:00前取消就诊前一天工作<br> 日14:00前取消就诊前一天工作日<span>
</div>
</div>
</div>
<div class="riqi"><img src="图片素材/icon-info.jpg">您还没有选择就诊日期</div>
</div>
</div>
</div>
<div class="footer">
Copyright © 2017慕课网版权所有
</div>
</body>
</html>
* {
padding: 0;
margin: 0;
border: 0;
}
a {
text-decoration: none;
}
/* top区 */
.top {
width: 100%;
height: 30px;
background: #f5f5f5;
font-size: 10px;
line-height: 30px;
color: #868686;
}
.wrap {
width: 1200px;
margin: 0 auto;
position: relative;
}
.call {
display: inline-block;
padding-left: 20px;
background: url('http://img1.sycdn.imooc.com/climg//58c61b9d0001e02d00170017.png') left no-repeat;
}
.welcome {
display: inline-block;
float: right;
}
.welcome a {
color: #5bb8e8;
text-decoration: none;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
zoom: 1;
}
/* header区 */
.logo {
display: inline-block;
width: 403px;
height: 74px;
padding: 9px 0;
}
.logo img {
width: 100%;
height: 100%;
}
.search {
position: absolute;
height: 38px;
width: 326px;
right: 0;
top: 29px;
background: url('http://img1.sycdn.imooc.com/climg//58c61b7e00012b9303260038.jpg')
}
/* nav区 */
.nav {
width: 100%;
height: 36px;
line-height: 36px;
background: #60bff2;
line-height: 36px;
margin-bottom: 20px;
}
.nav a {
display: inline-block;
width: 120px;
box-sizing: border-box;
font-size: 10px;
text-decoration: none;
color: white;
float: left;
text-align: center;
}
.nav a:hover{
color: #d7f3ff;
}
.nav .wrap a.right {
float: right;
width: 140px;
padding-right: 0;
}
.search {
font-size: 10px;
}
.ui-search-selected {
position: absolute;
top: 8px;
left: 10px;
color: white;
}
.ui-search-input {
position: absolute;
top: 1px;
left: 70px;
width: 216px;
height: 35px;
border: none;
}
.ui-search-selected-list {
display: none;
position: absolute;
top: 40px;
left: 0px;
background: white;
z-index: 2;
text-align: center;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
}
.ui-search-selected-list a {
display: block;
width: 70px;
height: 24px;
line-height: 24px;
color: #A5a2a2;
}
.ui-search-selected-list a:hover {
background: #ebeef5;
}
.ui-search-submit {
position: absolute;
top: 0px;
right: 0;
display: block;
width: 40px;
height: 36px;
}
/* 医院简介区 */
.jianjie .wrap{
background: #F7F7F7;
height: 350px;
box-sizing: border-box;
padding: 20px;
}
.shang{
border-bottom: 1px solid gray;
padding-bottom: 20px;
}
.shang a{
font-size: 10px;
color: #fecd09;
}
.dengji2{
float: right;
display: inline-block;
}
.dengji,.dengji1{
font-size: 10px;
}
.dengji{
color: blue;
}
.xia{
padding-top: 20px;
position: relative;
}
.xia span{
display: block;
float: left;
font-size: 10px;
color: #868686;
width: 700px;
padding-left: 30px;
padding-bottom: 20px;
}
.xia span:before{
background: url('../图片素材/icon-web.png') 0 0 no-repeat;
width: 20px;
height: 20px;
display: inline-block;
position: absolute;
top: 25px;
left: 206px;
content: '';
}
.xia span:nth-child(2):before{
background-position: 0 -22px;
top: 68px;
left: 206px;
}
.xia span:nth-child(3):before{
background-position: 0 -44px;
top: 111px;
left: 206px;
}
.xia span:nth-child(4):before{
background-position: 0 -63px;
top: 150px;
left: 206px;
}
.sucai1{
display: block;
float: left;
}
.sucai2{
float: right;
position: absolute;
top: 20px;
right: 10px;
}
/* 科室排班区 */
.paiban .wrap{
margin-top: 70px;
/* margin-bottom: 70px; */
}
.paiban div.wrap1{
margin-top: 20px;
}
.paibannav{
border-bottom: 2px solid #60bff2;
margin-bottom: 20px;
}
.paibannav a{
display: inline-block;
width: 150px;
height: 30px;
line-height: 30px;
font-size: 10px;
color: #60bff2;
text-align: center;
}
a.active{
background: #60bff2;
color: white;
}
.yuyueguahao{
width: 802px;
box-sizing: border-box;
margin-right: 20px;
border: 1px solid #f5f5f5;
float: left;
}
.kaifang{
width: 100%;
height: 70px;
background: #f5f5f5;
line-height: 70px;
padding-left: 40px;
box-sizing: border-box;
}
.zhuanke{
width: 250px;
float: left;
height: 200px;
font-size: 10px;
text-align: center;
background: #60bff2;
}
.teshu{
width: 550px;
float: left;
height: 200px;
font-size: 10px;
border-bottom: 1px solid #f5f5f5;
box-sizing: border-box;
padding-top: 10px;
padding-left: 20px;
}
.teshu a{
display: inline-block;
width: 120px;
margin-bottom: 20px;
}
div.teshu1{
border-bottom: none;
}
.yuyueguize{
width: 375px;
border: 1px solid #f5f5f5;
height: 500px;
float: right;
}
.guize{
width: 100%;
height: 70px;
background: #f5f5f5;
line-height: 70px;
box-sizing: border-box;
padding-left: 20px;
}
.guize span{
font-size: 10px;
color: #60bff2;
}
.guizeneirong{
height: 430px;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
box-sizing: border-box;
padding-left: 20px;
padding-top: 20px;
font-size: 10px;
}
.zhouqi1{
height: 500px;
}
.zhouqi{
padding-bottom: 10px;
}
.qitian{
color: gray;
}
.fanhui{
padding-left: 20px;
}
.fanhui span a{
font-size: 10px;
color:#60bff2;
}
.schedule_main{
float: left;
}
.schedule_tool_left{
float: left;
}
.schedule_box{
float: left;
}
.icon{
background: url('../图片素材/icon-scheduling-left.jpg');
display: block;
width: 40px;
height: 40px;
}
.schedule_tool_right a.icon1{
background: url('../图片素材/icon-scheduling-right.jpg');
}
.status{
height: 150px;
line-height: 150px;
background: #60bff2;
font-size: 10px;
text-align: center;
}
.schedule_tool_right{
float: right;
}
.riqi{
text-align: center;
font-size: 10px;
height: 70px;
line-height: 70px;
border: 1px solid #f5f5f5;
}
/* footer区 */
.footer {
height: 70px;
margin-top: 38px;
width: 100%;
text-align: center;
line-height: 70px;
background: #acacac;
font-size: 10px;
color: #bdbdbe;
}
$.fn.Uisearch = function() {
var ui = $(this);
$('.ui-search-selected', ui).click(function() {
$('.ui-search-selected-list').show();
return false;
})
$('.ui-search-selected-list a', ui).click(function() {
$('.ui-search-selected').text($(this).text());
$('.ui-search-selected-list').hide();
return false;
})
$('body').click(function() {
$('.ui-search-selected-list').hide();
})
}
$(document).ready(function() {
$('.ui-search').Uisearch();
// 科室排班选项卡
$('.paibannav a').click(function(){
$(this).addClass('active');
$(this).siblings().removeClass('active');
})
})0
收起
正在回答
2回答
同学，你好。这里不需要给.riqi的父元素清除浮动，只需要给.riqi上面的两个浮动的兄弟元素清除浮动就可以了，如图：
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星