浮动
display属性
块级元素<div>,<p>,<h1>~<h6>,列表
内联（行内）元素<a><img><span>
------标准文档流的组成
display{none 设置元素不被显示
{inline 设置元素为内联元素
{block 设置元素为块级元素
{inline-block 设置元素为行内块元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div span{
border: 1px solid red;
height: 100px;
width:500px;
}
#hide{
display: none;
}
.inline{
display: inline;
}
.block{
display: block;
}
.inlineblock{
display: inline-block;
}
</style>
</head>
<body>
<div class="inline">这是一个div块级元素</div>
<span class="block">这是一个内联span行内元素</span>
<span id="hide">这是一个内联span行内元素</span>
<span class="inlineblock">行内块元素</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div span{
border: 1px solid red;
height: 100px;
width:500px;
}
#hide{
display: none;
}
.inline{
display: inline;
}
.block{
display: block;
}
.inlineblock{
display: inline-block;
}
ul li{
display: inline-block;
padding: 0 8px;;
}
ul li a{
display: inline-block;
}
</style>
</head>
<body>
<div class="inline">这是一个div块级元素</div>
<span class="block">这是一个内联span行内元素</span>
<span id="hide">这是一个内联span行内元素</span>
<span class="inlineblock">行内块元素</span>
<hr/>
<ul>
<li><a href="">你好，请登录</a></li>
<li></li>
<li><a href="">我的订单</a></li>
<li></li>
<li><a href="">我的京东录</a></li>
<li></li>
<li><a href="">京东会员</a></li>
<li></li>
<li><a href="">企业采购</a></li>
<li></li>
<li><a href="">手机京东</a></li>
<li></li>
<li><a href="">京东商城</a></li>
<li></li>
<li><a href="">静静的</a></li>
</ul>
</body>
</html>
常用的网页布局
1，上下结构
2，上中下结构
3，上左右下结构1-2-1结构
4，上左中右下结构1-3-1结构
float 浮动属性
left:向左浮动
right：向右浮动
none：不浮动
浮动原理详细：请百度w3cshool --css:浮动
clear属性
left：
right：
both：
none:
如何让父容器随子元素自适应高度
（1）在父容器中添加一个空的子元素
.clear{clear:both;}
<div class="clear"></div>
(ps:在要求定位的属性时必须用clear）
(2)在父容器中加一个样式
overflow：hidden:裁剪内容 - 不提供滚动机制。;
{auto:如果溢出框，则应该提供滚动机制。
{scroll:裁剪内容 - 提供滚动机制。
{visible:不裁剪内容，可能会显示在内容框之外。}
（ps:子元素必须要被浮动，才不被剪除)
