摘要：浮动元素脱离文档流，即使浮动元素设置了高度，也不会撑开其父元素的高度。这时，需要在浮动元素后面加上<div style="clear:both"></div>,或者直接给父元素设置成和浮动元素一样的高度案例代码<!DOCTYPE html><html><head><meta charset="UTF-8
浮动元素脱离文档流，即使浮动元素设置了高度，也不会撑开其父元素的高度。这时，需要在浮动元素后面加上<div style="clear:both"></div>,或者直接给父元素设置成和浮动元素一样的高度
案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘宝</title>
<link href="css/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/case.css">
</head>
<body>
<div>
<div>
<div>
<a href="" style="color:#000;">中国大陆 <i class="fa fa-angle-down"></i></a>
<a href="" style="color: #FF4400;">亲，请登录</a>
<a href="">免费注册</a>
<a href="">手机逛淘宝</a>
</div>
<div>
<a href="">我的淘宝 <i class="fa fa-angle-down"></i></a>
<a href=""><i class="fa fa-cart-plus"> </i>购物车 <i class="fa fa-angle-down"></i></a>
<a href=""><i class="fa fa-star"></i> 收藏夹 <i class="fa fa-angle-down"></i></a>
<a href="">商品分类</a>
<span>|</span>
<a href="">卖家中心 <i class="fa fa-angle-down"></i></a>
<a href="">联系客服 <i class="fa fa-angle-down"></i></a>
<a href=""><i class="fa fa-navicon"></i> 网站导航 <i class="fa fa-angle-down"></i></a>
</div>
<div></div>
</div>
</div>
</body>
</html>
*{margin: 0;padding: 0;}
.clear{clear: both;}
.header{width: 100%;background: #F5F5F5;}
.header_content{width: 1192px;margin: 0px auto;line-height: 36px;text-align: center;}
.header_a{display: inline-block;width: 86px;}
.header_a:hover{background: #FFF;}
.header_content a{text-decoration: none;color:#6C6C6C;margin-right: 2px;}
.header_content a:hover{color: #FF4400;}
.header_left{height: 36px;float: left;}
.header_left a{font-size:13px;}
.header_right{height:36px;float: right;}
.header_right a{font-size:14px;}
.fenge{font-size:13px;color: #ccc;margin-left: 6px;}
批改老师：灭绝师太批改时间：2018-11-11 09:30:11
老师总结：刚开始的布局可以仿照老师的，之后要试着用自己的方法和风格完成作业啦
