体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

为什么我的nav盒子里面的元素不能同时左浮动右浮动

来源：5-12 项目作业

迷失的小麦

2020-02-04 14:54:40

之前的提问：https://class.imooc.com/course/qadetail/188179

老师的作业批复没提到这个问题

http://img.mukewang.com/climg/5e39151109ab4cb606610542.jpg

我自己把左边的内容用position: absolute;代替左浮动解决的，但是我想知道为啥不能同时左浮动右浮动

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/ui.css">
<title>无标题文档</title>
</head>

<body>
<!--top区域-->
<div class="top">
	<div class="wrap clearfixed">
		<div class="top-left"> 
			<img src="img/icon-call.png" alt="telephone">
			<span>010-114/116114电话预约</span>
		</div>
		<div class="top-right">
			<span>欢迎来到城市预约挂号统一平台&nbsp;请</span>
			<span>登录</span>
			<span>注册</span>
			<span>帮助中心</span>
		</div>
	</div>
</div>
<!--head区域-->
<div class="head">
	<div class="wrap clearfixed">
		<div class="head-left">
			<img src="img/logo.png" alt="logo">
		</div>
		<div class="head-right ui-search">
			<div class="ui-search-selected">医院</div>
            <div class="ui-search-select-list">
            	<a href="#1">科室</a>
            	<a href="#1">疾病</a>
            	<a href="#1">医院</a>
            </div>
            <input type="text" name="search-content" class="ui-search-input" placeholder="请输入搜索内容">
			<a href="#" class="ui-search-submit">&nbsp;</a>
		</div>
	</div>
</div>
<!--nav区域-->
<div class="nav">
	<div class="wrap clearfixed">
		<div class="nav-left">
			<a href="#">首页</a>
			<a href="#">按医院挂号</a>
			<a href="#">按科室挂号</a>
			<a href="#">按疾病挂号</a>
			<a href="#">最新公告</a>
		</div>
		<div class="nav-right">
			<a href="#">社会知名医院</a>
		</div>
	</div>
</div>
<!--医院简介区域-->
<div class="jianjie">
	<div class="wrap">
		<div class="jianjie-top">
			<div class="jianjie-top-left">
				<span>北京协和医院</span>
				<span>关注医院</span>
			</div>
			<div class="jianjie-top-right clearfixed">
				<p><span>等级：</span><span>三级甲等</span></p>
				<p><span>区域：</span><span>东城区</span></p>
				<p><span>分类：</span><span>中国医科院所属医院</span></p>
			</div>
		</div>
		<div class="jianjie-botton clearfixed">
			<img src="img/hospital-1.jpg" alt="hospital">
			<div class="jianjie-connent">
				<div class="jianjie-box clearfixed">
					<div class="icon1"></div>
					<p>[东院]北京市东城区帅府园一号[东院]北京市东城区帅府园一号</p>
				</div>
				<div class="jianjie-box clearfixed">
					<div class="icon2"></div>
					<p>http://www.baidu.com.cn/</p>
				</div>
				<div class="jianjie-box clearfixed">
					<div class="icon3"></div>
					<p>东院咨询台：010-69155564；西院咨询台：010-69155564；</p>
				</div>
				<div class="jianjie-box clearfixed">
					<div class="icon4"></div>
					<p>东院：106，106,108到东单路口北；41,104块，814到东单路</p>
					<p class="padding">东院：106，106,108到东单路口北；41,104块，814到东单路</p>
					<p class="padding">东院：106，106,108到东单路口北；41,104块，814到东单路</p>
					<p class="padding">更多乘车路线详见须知</p>
				</div>
			</div>
			<img src="img/map-1.png" alt="map">
		</div>
	</div>
</div>
<!--医院体系区域-->
<div class="tixi">
	<div class="wrap">
		<!--体系导航-->
		<div class="tixi-nav clearfixed">
			<div class="item item_focus">预约挂号</div>
			<div class="item">医院介绍</div>
			<div class="item">预约须知</div>
			<div class="item">停诊信息</div>
			<div class="item">查询取消</div>
		</div>
		<!--体系内容-->
		<div class="tixi-neirong">
			<div class="item clearfixed">
				<div class="neirongbox-left">
					<div class="neirong-left-up">开放预约科室</div>
					<div class="neirong-left-down clearfixed">
						<div class="zhonglei">
							<div>2301</div>
							<div>专科</div>
							<div>内科</div>
							<div>内科</div>
						</div>
						<div class="keshi-box">
							<div class="keshi clearfixed">
								<a href="keshi.html" class="margin">特殊门诊科</a>
								<a href="keshi.html">特殊门诊科</a>
								<a href="keshi.html">特殊门诊科</a>
								<a href="keshi.html">特殊门诊科</a>
								<a href="keshi.html" class="margin">特殊门诊科</a>
								<a href="keshi.html">特殊门诊科</a>
								<a href="keshi.html">特殊门诊科</a>
								<a href="keshi.html">特殊门诊科</a>
								<a href="keshi.html" class="margin">特殊门诊科</a>
								<a href="keshi.html">特殊门诊科</a>
							</div>
							<div class="keshi clearfixed">
								<a href="keshi.html" class="margin">门诊麻醉科</a>
								<a href="keshi.html">多发性硬化专科</a>
								<a href="keshi.html">门诊麻醉科</a>
								<a href="keshi.html">门诊麻醉科</a>
								<a href="keshi.html" class="margin">多发性硬化专科</a>
								<a href="keshi.html">多发性硬化专科</a>
								<a href="keshi.html">多发性硬化专科</a>
								<a href="keshi.html">门诊麻醉科</a>
								<a href="keshi.html" class="margin">特殊门诊科</a>
								<a href="keshi.html">门诊麻醉科</a>
								<a href="keshi.html">多发性硬化专科</a>
								<a href="keshi.html">特殊门诊科</a>
							</div>
							<div class="keshi clearfixed">
								<a href="keshi.html" class="margin">肿瘤内科门诊</a>
								<a href="keshi.html">特需血液内科</a>
								<a href="keshi.html">门诊麻醉科</a>
								<a href="keshi.html">门诊麻醉科</a>
								<a href="keshi.html" class="margin">门诊麻醉科</a>
								<a href="keshi.html">肿瘤内科门诊</a>
								<a href="keshi.html">特需血液内科</a>
								<a href="keshi.html">特需血液内科</a>
								<a href="keshi.html" class="margin">肿瘤内科门诊</a>
								<a href="keshi.html">肿瘤内科门诊</a>
								<a href="keshi.html">门诊麻醉科</a>
								<a href="keshi.html">肿瘤内科门诊</a>
							</div>
							<div class="keshi clearfixed">
								<a href="keshi.html" class="margin">肿瘤内科门诊</a>
								<a href="keshi.html">特需血液内科</a>
								<a href="keshi.html">门诊麻醉科</a>
								<a href="keshi.html">门诊麻醉科</a>
								<a href="keshi.html" class="margin">门诊麻醉科</a>
								<a href="keshi.html">肿瘤内科门诊</a>
								<a href="keshi.html">特需血液内科</a>
								<a href="keshi.html">特需血液内科</a>
								<a href="keshi.html" class="margin">肿瘤内科门诊</a>
								<a href="keshi.html">肿瘤内科门诊</a>
								<a href="keshi.html">门诊麻醉科</a>
								<a href="keshi.html">肿瘤内科门诊</a>
							</div>
						</div>
					</div>
				</div>
				<div class="neirongbox-right">
					<div class="neirong-right-up">
						<span>预约规则</span>
						<span>（更新时间每日8:40更新）</span>
					</div>
					<div class="neirongbox-right-box">
						<div class="neirong-right-down">
							<div>预约周期：<span>7天</span></div>
							<div>放号时间：<span>8:30</span></div>
							<div>停挂时间：<span>下午14:00停止次日预约挂号</span><div class="shijian">（周五14:00后停挂至下周一）</div></div>
							<div>退号时间：<span>就诊前一工作日14:00前取消</span></div>
							<div class="teshuguize-box">
								特殊规则：
								<div class="teshuguize">
									<div>①取号地点不同：西医院区预约号取号取号地点不同：西医院区预约号取号</div>
									<div>②取号地点不同：西医院区预约号取号取号地点不同：西医院区预约号取号</div>
									<div>③取号地点不同：西医院区预约号取号取号地点不同：西医院区预约号取号</div>
								</div>
							</div>	
						</div>
					</div>
				</div>
			</div>
			<div class="item" style="display: none;">
				<div class="quyu2 wrap">
					<p>北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。它隶属于中国协和医科大学(2006年改为北京协和医学院/清华大学医学部)，是其临床医学院，同时也是中国医学科学院的临床医学研究所，中华人民共和国卫生部指定的诊治疑难重症的技术指导中心之一。北京协和医院在中国乃至世界享有盛名。医院成立于1921年。现任院长赵玉沛。北京协和医院是中国最早承担外宾医疗任务的单位，医院专门设立外宾和高干门诊部，开设专门的高干、外宾、特需病区。2006年7月28日被中国奥委会定为“国家队运动员医疗服务指定医院”。北京协和医院是一所位于北京市东城区，集医疗、科研、教学为一体的大型综合医院。它隶属于中国协和医科大学(2006年改为北京协和医学院/清华大学医学部)，是其临床医学院，同时也是中国医学科学院的临床医学研究所，中华人民共和国卫生部指定的诊治疑难重症的技术指导中心之一。北京协和医院在中国乃至世界享有盛名。医院成立于1921年。现任院长赵玉沛。北京协和医院是中国最早承担外宾医疗任务的单位，医院专门设立外宾和高干门诊部，开设专门的高干、外宾、特需病区。2006年7月28日被中国奥委会定为“国家队运动员医疗服务指定医院”。</p>
					<p>2017年11月11日下午，复旦大学医院管理研究所正式发布了《2016年度中国医院排行榜》和《2016年度中国医院专科声誉排行榜》，北京协和医院名列榜首。2018年12月4日消息，被国家卫健委公布为首批肿瘤多学科诊疗试点医院。2019年11月10日，复旦版《2018年度中国医院排行榜》发布，北京协和居首。</p>
					<p>医院建成于1921年，由洛克菲勒基金会创办。建院之初，就志在“建成亚洲最好的医学中心”。2019年12月，中国医学科学院在北京发布了《2018年度中国医院科技量值报告》，北京协和医院综合排名位列前10位。</p>
					<p>皮肤科多年来坚持三级医师查房及门诊疑难病例会诊等制度，使老协和的优良传统与现代医疗技术相结合，提高了医疗质量，培养出一批高水平临床医生，使广大患者获益。特别是在疑难病例会诊会上，来自皮肤科的老专家老教授、年轻医生和学生，以及兄弟科室、兄弟医院的临床医生、进修生、研究生聚集一堂，带来了他们的疑难病例和临床经验，共同讨论病例、交流临床经验，为解除患者疾苦出谋献策。提高了医疗水平，培养了新人，使皮肤科真正成为国内具有一定影响力的疑难病例会诊中心。同时，皮肤科还开展多种新项目、新疗法，如表皮移植治疗白癜风，PUVA治疗银屑病，308nm准分子激光治疗白癜风，药浴治疗大疱病、药疹和皮肤溃疡，开设包括银屑病、大疱病、硬皮病、中西医结合皮肤科、皮肤肿瘤、面部皮肤病、皮肤美容以及皮肤真菌病等专病门诊，提高了疗效，受到了患者的欢迎。</p>
				</div>
			</div>
			<div class="item" style="display: none;">
				<div class="quyu3 wrap">
					<p>北京协和医院预约挂号须知</p>
					<div>
						<p class="weight">电话预约挂号：010-114（24小时）</p>
					</div>
					<div>
						<p class="weight">网络预约挂号：www.baidu.com</p>
						<p>根据卫生部8月5号通知，北京协和医院已完成电话、网络预约挂号的流程建设，现公布如下，请认真阅读须知：</p>
					</div>
					<div>
						<p class="weight">一、预约范围</p>
						<p>1.平台不提供当日预约服务，用户可预约接入平台医院的大部分科室次日起至一周内的就诊号源，统一平台按照医院、科室、职称、专业不点名预约</p>
						<p>2.每天可预约次日号源的服务时间截止到15:00前</p>
					</div>
					<div>
						<p class="weight">二、实名制注册预约</p>
						<p>1.平台电话预约和APP预约挂号采取实名制注册，用户首次预约必须注册就诊人的真实有效基本信息</p>
						<p>2.用户到医院取号就诊时须出示与预约登记实名信息一致的本人有效证件，否则医院不予办理挂号业务及诊疗服务</p>
						<p>3.平台电话注册和APP注册，1个手机号只能关联1个有效证件号</p>
						<p>4.注册预约须要求用户准备好手机，"手机短信验证" 是注册预约流程的重要环节，没有通过验证，用户无法成功注册预约，故请务必填写真实有效的手机号码</p>
					</div>
					<div>
						<p class="weight">三、账户信息管理</p>
						<p>1.请保证您的平台账户信息真实有效，如用错误信息，或虚假信息预约挂号，不仅在就诊当日影响您取号就诊，同时也会影响到您今后的预约行为</p>
						<p>2.注册用户如名下存在未就诊的预约号源时，无法申请修改注册信息，请先取消所有当前有效预约号源或等约成号源过期的次日后再申请修改。</p>
						<p>3.平台可直接在个人信息里面修改资料，除了注册手机号码以外</p>
					</div>
					<div>
						<p class="weight">四、预约确认与就诊</p>
						<p>1.通过网站或APP预约成功后，系统会自动下发预约成功短信及唯一的8位数字识别码到用户注册手机上。</p>
						<p>2.预约成功后，请您妥善保存"预约成功短信和预约识别码"，以便随时查询和取消预约信息之用，同时也是您用于取号就诊的凭证之一。</p>
						<p>3.如果您未收到或丢失"预约成功短信和预约识别码"，可登录平台的"个人中心>预约管理>当前预约"中找到相应的订单查看详情。</p>
						<p>4.成功预约挂号后，系统将自动保存用户预约记录。就诊当天，您需要在医院规定的取号时间之内，前往医院指定的地点取号就诊，并缴纳医院规定的挂号费（或医事服务费），逾期预约自动作废。具体取号时间和取号地点请查阅系统下发的预约成功通知短信，或各家医院的个性化预约须知。</p>
						<p>5.本着方便患者的原则，个别医院开通了自助取号或分诊台先取号后缴费服务，具体取号流程和要求以医院现场公示为准。如患者就诊后未缴费，将被列入欠费名单，您将无法通过统一平台或在各医院进行任何形式的预约挂号和窗口挂号。</p>
						<p>6.取号时需要提供以下重要凭证：就诊当日取号时，就诊人需凭就诊人本人注册的有效证件原件、预约成功通知短信和预约识别码至医院指定的挂号窗口取号（个别医院要求先办理就诊卡并关联社保卡后再取号，具体详见各家医院的个性化预约须知）；取号时医务人员将核对就诊者的身份信息和预约记录，如信息验证不符，则医院不能提供相应的诊疗服务。</p>
					</div>
					<div>
						<p class="weight">五、查询、取消预约</p>
						<p>1.用户在医院规定的取消时限内可以取消预约号，超过退号截止时间系统将限制用户退号，一般截止时间为就诊日期的前一天下午15:00点，就诊当天不能取消当日预约号。（注：个别医院的预约取消截止时间有所不同，具体规则请关注各家医院的个性化预约须知）</p>
						<p>2.在医院规定的取消预约时限内，用户可登录统一平台网站的"个人中心"直接取消. </p>
						<p>3.如果您在就诊当天不能前往医院取号就诊，请提前退号，否则会因造成号源的浪费，影响其他患者的就诊而被记录爽约档案，由此会影响到您今后的预约行为，请您谅解。</p>
					</div>
					<div>
						<p class="weight">六、预约限制</p>
						<p>为了防止号贩子倒号行为，满足绝大多数百姓的最大利益和公平性，平台采取了预约挂号限制。按照深圳健康网平台提供的预约挂号服务公约，同一患者实名（有效证件号）在同一就诊日、同一医院、同一科室只能预约1次；在同一就诊日的预约总量不可超过2次；在七日内的预约总量不可超过5次；在三个月内预约总量不可超过15次。</p>
					</div>
					<div>
						<p>七、爽约的判定及处罚</p>
						<p>1.爽约是指用户未按医院规定的取号时间提前到医院指定的挂号窗口取号，且超过预约就诊时间未能按时就诊即视为爽约，该预约号源自动作废。如仍需就诊可重新预约或到医院挂号窗口挂号。</p>
						<p>2.一年内（自然年）无故爽约累计达到3次的爽约用户将自动进入系统爽约名单，此后3个月内将取消其预约挂号资格；一年内（自然年）累计爽约6次，取消6个月的预约挂号资格。</p>
					</div>
				</div>
			</div>
			<div class="item" style="display: none;">
				<div class="quyu4 wrap">
					<p>停诊信息</p>
					<table class="section" width="100%" cellpadding="0" cellspacing="0" rules="all">
						<tr align="center" valign="middle">
							<td>日期</td>
							<td>星期</td>
							<td>时段</td>
							<td>科室</td>
							<td>特长</td>
							<td>职称</td>
							<td>挂号费</td>
							<td>可挂号数</td>
							<td>剩余号数</td>
							<td>替换方式</td>
						</tr>
						<tr align="center" valign="middle">
							<td>2017-01-09</td>
							<td>1</td>
							<td>上午</td>
							<td>呼吸内科门诊</td>
							<td></td>
							<td>主治医师</td>
							<td>5.00</td>
							<td>0</td>
							<td>0</td>
							<td>不可替换</td>
						</tr>
						<tr align="center" valign="middle">
							<td>2017-01-13</td>
							<td>5</td>
							<td>上午</td>
							<td>眼科门诊</td>
							<td></td>
							<td>主治医师</td>
							<td>5.00</td>
							<td>0</td>
							<td>0</td>
							<td>不可替换</td>
						</tr>
						<tr align="center" valign="middle">
							<td>2017-01-10</td>
							<td>2</td>
							<td>下午</td>
							<td>变态反应科门诊</td>
							<td></td>
							<td>正教授</td>
							<td>9.00</td>
							<td>0</td>
							<td>0</td>
							<td>不可替换</td>
						</tr>
						<tr align="center" valign="middle">
							<td>2017-01-11</td>
							<td>3</td>
							<td>下午</td>
							<td>骨科门诊</td>
							<td></td>
							<td>主治医师</td>
							<td>5.00</td>
							<td>0</td>
							<td>0</td>
							<td>不可替换</td>
						</tr>
						<tr align="center" valign="middle">
							<td>2017-01-12</td>
							<td>4</td>
							<td>下午</td>
							<td>特需眼科门诊</td>
							<td></td>
							<td>专家（特需300）</td>
							<td>300.00</td>
							<td>0</td>
							<td>0</td>
							<td>不可替换</td>
						</tr>
						<tr align="center" valign="middle">
							<td>2017-01-10</td>
							<td>2</td>
							<td>上午</td>
							<td>特需中医科门诊</td>
							<td></td>
							<td>副教授（特需200）</td>
							<td>200.00</td>
							<td>0</td>
							<td>0</td>
							<td>不可替换</td>
						</tr>
						<tr align="center" valign="middle">
							<td>2017-01-09</td>
							<td>1</td>
							<td>上午</td>
							<td>呼吸内科门诊</td>
							<td></td>
							<td>主治医师</td>
							<td>5.00</td>
							<td>0</td>
							<td>0</td>
							<td>不可替换</td>
						</tr>
						<tr align="center" valign="middle">
							<td>2017-01-13</td>
							<td>5</td>
							<td>上午</td>
							<td>眼科门诊</td>
							<td></td>
							<td>主治医师</td>
							<td>5.00</td>
							<td>0</td>
							<td>0</td>
							<td>不可替换</td>
						</tr>
						<tr align="center" valign="middle">
							<td>2017-01-10</td>
							<td>2</td>
							<td>下午</td>
							<td>变态反应科门诊</td>
							<td></td>
							<td>正教授</td>
							<td>9.00</td>
							<td>0</td>
							<td>0</td>
							<td>不可替换</td>
						</tr>
						<tr align="center" valign="middle">
							<td>2017-01-11</td>
							<td>3</td>
							<td>下午</td>
							<td>骨科门诊</td>
							<td></td>
							<td>主治医师</td>
							<td>5.00</td>
							<td>0</td>
							<td>0</td>
							<td>不可替换</td>
						</tr>
						<tr align="center" valign="middle">
							<td>2017-01-12</td>
							<td>4</td>
							<td>下午</td>
							<td>特需眼科门诊</td>
							<td></td>
							<td>专家（特需300）</td>
							<td>300.00</td>
							<td>0</td>
							<td>0</td>
							<td>不可替换</td>
						</tr>
						<tr align="center" valign="middle">
							<td>2017-01-10</td>
							<td>2</td>
							<td>上午</td>
							<td>特需中医科门诊</td>
							<td></td>
							<td>副教授（特需200）</td>
							<td>200.00</td>
							<td>0</td>
							<td>0</td>
							<td>不可替换</td>
						</tr>
						<tr align="center" valign="middle">
							<td>2017-01-09</td>
							<td>1</td>
							<td>上午</td>
							<td>呼吸内科门诊</td>
							<td></td>
							<td>主治医师</td>
							<td>5.00</td>
							<td>0</td>
							<td>0</td>
							<td>不可替换</td>
						</tr>
						<tr align="center" valign="middle">
							<td>2017-01-13</td>
							<td>5</td>
							<td>上午</td>
							<td>眼科门诊</td>
							<td></td>
							<td>主治医师</td>
							<td>5.00</td>
							<td>0</td>
							<td>0</td>
							<td>不可替换</td>
						</tr>
						<tr align="center" valign="middle">
							<td>2017-01-10</td>
							<td>2</td>
							<td>下午</td>
							<td>变态反应科门诊</td>
							<td></td>
							<td>正教授</td>
							<td>9.00</td>
							<td>0</td>
							<td>0</td>
							<td>不可替换</td>
						</tr>
						<tr align="center" valign="middle">
							<td>2017-01-11</td>
							<td>3</td>
							<td>下午</td>
							<td>骨科门诊</td>
							<td></td>
							<td>主治医师</td>
							<td>5.00</td>
							<td>0</td>
							<td>0</td>
							<td>不可替换</td>
						</tr>
						<tr align="center" valign="middle">
							<td>2017-01-12</td>
							<td>4</td>
							<td>下午</td>
							<td>特需眼科门诊</td>
							<td></td>
							<td>专家（特需300）</td>
							<td>300.00</td>
							<td>0</td>
							<td>0</td>
							<td>不可替换</td>
						</tr>
						<tr align="center" valign="middle">
							<td>2017-01-10</td>
							<td>2</td>
							<td>上午</td>
							<td>特需中医科门诊</td>
							<td></td>
							<td>副教授（特需200）</td>
							<td>200.00</td>
							<td>0</td>
							<td>0</td>
							<td>不可替换</td>
						</tr>
					</table>
				</div>
			</div>
			<div class="item" style="display: none;">
				<div class="wrap quyu5">
					<div class="quyu5-box">
						<span>预约识别码：</span>
						<input type="text" class="quyu5-text">
						<input type="button" value="查询订单" class="quyu5-button">
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!--脚部区域-->
<div class="footer">&copy; 2016 imooc.com 京ICP备13046642号</div>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
@charset "utf-8";
/* CSS Document */
*{margin: 0;padding: 0;}
a{text-decoration: none;}
input,select{outline: none;border: none;}
.wrap{width: 1000px;margin: 0 auto;position: relative;}
.clearfixed {zoom: 1;}
.clearfixed::after {display: block;clear: both;content: "";}
/*top区域*/
.top{background-color: #f5f5f5;width: 100%;height: 30px;line-height: 30px;font-size: 12px;}
.top-left{float: left;}
.top-left img{display: inline-block;width: 20px;height: 20px;vertical-align: sub;}
.top-left span{color: #868686;}
.top-right{float: right;}
.top-right span{color: blue;}
.top-right span:nth-child(1){color: #868686;}
.top-right span:nth-child(2){margin-left: 32px;cursor: pointer;}
.top-right span:nth-child(3){margin-left: 20px;cursor: pointer;}
.top-right span:nth-child(4){margin-left: 78px;cursor: pointer;}
/*head区域*/
.head{width: 100%;height: 90px;line-height: 90px;}
.head-left{float: left;}
.head-left img{height: 90px;}
.head-right{width: 326px;height: 38px;position: absolute;right: 0px;top: 19px;}
/*nav区域*/
.nav{background-color: #60bff2;width: 100%;height: 36px;line-height: 36px;}
.nav-left{/*float: left;width: 500px;height: 36px;*/position: absolute;top: 0;left: 0;/*为什么这里不能float：left*/}
.nav-right{float: right;width: 126px;height: 36px;}
.nav a{padding: 0 15px;color: white;cursor: pointer;display: inline-block;}
.nav a:hover{background-color: #87CEEB;}
/*医院简介区域上盒子*/
.jianjie .wrap{width: 950px;background-color: #F7F7F7;margin-top: 30px;margin-bottom: 40px;padding: 0 25px 18px;}
.jianjie-top{height: 52px;line-height: 52px;position: relative;}
.jianjie-top::after{content: '';width: 950px;height: 1px;background-color: #dcdddd;position: absolute;bottom: 0;left: 0;}
.jianjie-top-left{position: absolute;left: 0;top: 0;} 
.jianjie-top-left span:nth-of-type(1){font-size: 16px;color: black;}
.jianjie-top-left span:nth-of-type(2){font-size: 12px;color: orange;}
.jianjie-top-right{position: absolute;right: 0;top: 0;}
.jianjie-top-right p{float: left;font-size: 12px;}
.jianjie-top-right p span:nth-child(1){color: blue;padding-left: 14px;}
.jianjie-top-right p span:nth-child(2){color: black;}
/*医院简介区域下盒子*/
.jianjie-botton{margin-top: 12px;}
.jianjie-botton > img:first-of-type{width: 200px;height: 150px;display: block;float: left;}
.jianjie-botton > img:last-of-type{width: 250px;height: 165px;display: block;float: left;}
.jianjie-connent{float: left;width: 446px;height: 180px;margin-left: 30px;margin-right: 22px;}
.jianjie-box{margin-bottom: 18px;}
.jianjie-box > div{width: 16px;height: 16px;float: left;background-repeat: no-repeat;
	background-image: url("../img/icon-web.png");overflow: hidden;/*为啥用background的时候background-position不起效果*/}
.icon1{background-position: 0px 0px;}
.icon2{background-position: 0px -22px;}
.icon3{background-position: 0px -44px;}
.icon4{background-position: 0px -65px;}
.jianjie-box p{font-size: 10px;text-indent: 15px;color: #888888;float: left;}
.padding{padding-left: 16px;}
/*医院体系区域导航栏*/
.tixi-nav{border-bottom: solid 1px #60bff2;margin-bottom: 20px;}
.tixi-nav .item{color: #00b3ec;text-align: center;height: 30px;line-height: 30px;padding: 0 26px;font-size: 14px;
	float: left;cursor: pointer;}
/*医院体系内容区域1*/
/*1区域左边*/
.neirongbox-left{width: 706px;height: 406px;border: 1px solid #f4f6fa;float: left;}
.neirong-left-up{width: 706px;line-height: 40px;height: 40px;background-color: #f4f6fa;font-size: 14px;text-indent: 30px;}
.neirong-left-down .zhonglei{float: left;}
.neirong-left-down .zhonglei div{width: 144px;height: 90px;line-height: 90px;border-bottom: 2px solid #f4f6fa;
	background-color: #f2fbff;color: #888888;font-size: 14px;text-align: center;}
.neirong-left-down .zhonglei div:last-of-type{border-bottom: none;}
.neirong-left-down .keshi-box .keshi{height: 90px;width: 562px;float: left;border-bottom: 2px solid #f4f6fa;}
.neirong-left-down .keshi-box .keshi a{width: 120px;height: 30px;line-height: 30px;text-align: left;float: left;
	font-weight: 700;font-size: 14px;display: block;text-decoration: none;color: black;}
.neirong-left-down .keshi-box .keshi:last-of-type{border-bottom: none;}
.margin{margin-left: 20px;}
/*1区域右边*/
.neirongbox-right{margin-left: 18px;width: 272px;height: 282px;border: 1px solid #f4f6fa;float: left;}
.neirong-right-up{width: 272px;height: 40px;line-height: 40px;background-color: #f4f6fa;}
.neirong-right-up > span:first-of-type{color: #606060;font-size: 14px;margin-left: 10px;}
.neirong-right-up > span:last-of-type{color: #00b3ea;font-size: 12px;}
.neirongbox-right-box{width: 272px;height: 242px;overflow: auto;}
.neirong-right-down{width: 260px;height: 350px;}
.neirong-right-down > div{color: black;font-size: 12px;margin-bottom: 12px;text-indent: 12px;}
.neirong-right-down span{color: #888888;}
.shijian{color: #888888;text-indent: 68px;}
.neirong-right-down > div:first-of-type{margin-top: 12px;}
.teshuguize-box{position: relative;}
.teshuguize{width: 160px;display: block;line-height: 18px;position: absolute;top: 0;right: 30px;color: #888888;}
/*2区域*/
.quyu2 p{line-height: 26px;margin-top: 20px;font-size: 12px;text-indent: 2em;}
/*3区域*/
.quyu3 > p{font-weight: 700;text-align: center;margin-top: 44px;margin-bottom: 48px;font-size: 18px;line-height: 18px;}
.quyu3 > div{margin-bottom: 30px;}
.quyu3 > div > p{font-size: 10px;line-height: 22px;}
.weight{font-weight: 700;}
/*4区域*/
.quyu4 > p{text-align: center;font-weight: 700;margin-top: 44px;margin-bottom: 22px;font-size: 18px;}
.section{border: 1px solid #ccc;font-size: 12px;line-height: 29px;}
/*5区域*/
.quyu5{height: 200px;border-bottom: 1px solid #ccc;border-top: 1px solid #ccc;margin-top: 80px;}
.quyu5-box{position: absolute;width: 400px;height: 31px;margin: auto;top: 0;bottom: 0;left: 0;right: 0;}
.quyu5-text{display: inline-block;border: 1px solid #dcdddd;width: 191px;height: 28px;}
.quyu5-button{display: inline-block;background-color: #00b3ec;color: white;
	width: 108px;height: 30px;margin-left: 5px;cursor: pointer;}
.quyu5-box span{font-size: 14px;line-height: 14px;}
/*脚部*/
.footer{background-color: #eceef2;line-height: 70px;text-align: center;color: #acacac;margin-top: 80px;}


写回答

1回答

好帮手慕言

2020-02-04

已采纳

同学你好，测试同学上传的作业，类名为nav元素里面的子元素，通过浮动不能实现效果，原因是header区域里的img标签自带间隙导致的，如下图：

http://img.mukewang.com/climg/5e3925980901ac7204810201.jpg

建议：给img设置为块元素即可清除间隙。

代码参考：
http://img.mukewang.com/climg/5e3925e1092e603403190154.jpg

nav左侧的元素使用左浮动，如下：

http://img.mukewang.com/climg/5e39261909319b6e04030230.jpg

效果：

http://img.mukewang.com/climg/5e39262c09eb969610700152.jpg

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

0

0 学习 · 14456 问题

查看课程

相似问题

overflow:hidden清除浮动会继承吗

回答 3

关于float之后后面的元素跑之前去了

回答 1

可不可以在content上清除浮动呢？

回答 2

请问为什么设置浮动之后不再一行显示了

回答 2

关于清除浮动，为什么不直接定义父元素高度

回答 1

打开慕课网App查看更多内容