Float布局

.clearfix

.浮动会造成父容器高度坍塌，因此要清理浮动。 将.clearfix类应用到需要清除浮动的父元素;

common.css

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
ul{
  list-style:none;
}
.clearfix::after{
  content:'';
  display:block;
  clear:both;
}

四栏布局

  <ul class="nav clearfix">
    <li>Leading-Role</li>
    <li>Supporting-Role</li>
    <li>Team</li>
    <li>About</li>
  </ul>

.nav {
  border:1px solid black; 
  margin-right: 20px;
}
.nav > li {
  /* border:1px solid red; */
  float: left;
  padding: 4px 0.5em;
  margin-right: 10px;
  margin-top: 2px;
  font-size: 18px;
}

两栏布局

  <header class="clearfix">
    <div class="logo">
      House of Cards
    </div>
    <ul class="nav clearfix">
      <li>Leading-Role</li>
      <li>Supporting-Role</li>
      <li>Team</li>
      <li>About</li>
    </ul>
  </header>

.nav {
  /* border:1px solid black; */
  float: right;
  margin-right: 20px;
}
.nav > li {
  /* border:1px solid red; */
  float: left;
  padding: 4px 0.5em;
  margin-right: 10px;
  margin-top: 2px;
  font-size: 18px;
}

.logo {
  float: left;
  margin: 6px 20px;
}
header {
  /* border:1px solid green; */
  background: grey;
  color: white;
  font-size: 20px;
}

三栏布局

  <div class="content clearfix">
    <aside></aside>
    <main></main>
    <div class="ad"></div>
  </div>

.content {
  /* outline:1px solid red; */
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.content > aside {
  /* outline:1px solid black; */
  float: left;
  width: 200px;
  height: 500px;
  background-color: rgb(255, 130, 160);
}
.content > main {
  /* outline:1px solid green; */
  float: left;
  width: 500px;
  height: 500px;
  background-color: green;
}
.content > .ad {
  /* outline:1px solid purple; */
  float: left;
  width: 100px;
  height: 500px;
  background-color: purple;
}

平均布局

  <div class="imageList">
    <div class="x  clearfix">
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
    </div>
  </div>

.imageList{
  outline: 1px solid green; 
  width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px; 
}
.imageList >.x > .image{
  width: 185px;
  height: 185px;
  float: left;
  margin-bottom: 20px;
  margin-right: 20px;
  background-color: rgba(255, 0, 0, 0.3);
}
.imageList > .x{
  margin-right: -20px;
}

float布局