CSS布局布局分类2种基本布局：固定宽度：一般宽度960/1000/1024px不固定宽度布局，主要靠文档流的原理布局（

布局分类

2种基本布局：

固定宽度：一般宽度960/1000/1024px
不固定宽度布局，主要靠文档流的原理布局（文本流本来就是自适应的，不需要加额外样式）
响应式布局：PC上固定宽度，手机不固定宽度，也就是一种混合布局

Float布局

步骤

子元素加上float:left和width
在父元素加上.clearfix（一定要记得加）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <header class='clearfix'>
<div class="logo">
  XDML
</div>
  <nav>导航</nav>
      </header>
</body>
</html>

*{
  margin:0;
  padding:0;
  box-sizing:border-box
}
  <!--父元素加clearfix,内容固定-->
.clearfix:after{
  content:'';
  display:block;
  clear:both;
}

.logo{
  border:1px solid red;
  height:50px;
  width:100px;
  float:left; 
}
nav{
  border:1px solid green;
  height:50px;
  width:200px;
  float:right;
}
header{
  border:1px solid red;
}

练习

四栏布局

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>float实践导航4栏</title>
</head>
<body>
<ul class='clearfix'>
  <li>首页</li>
  <li>课程</li>
  <li>优惠</li>
  <li>关于</li>

</ul>
</body>
</html>

*{
  margin:0;
  padding:0;
}
.clearfix::after{
  content:'';
  display:block;
  clear:both;
}
ul,ol{
  list-style:none;
}
ul>li{
  float:left;
  border:1px solid red;
  padding:4px 0.3em 0.5em;
  
}
ul{
  border:1px solid green;
  display:inline-block; //尽量压窄自己
}