清除浮动方式一

.parent{
  border: 1px solid red;
}
.div1{
  width: 100px;
  height: 100px;
  background-color: pink;
  float:  left;
}
.div2{
  width: 200px;
  height: 200px;
  background-color: greenyellow;
  float: left;
}
/* 清除浮动方式1 */
.clean_float{
  clear: both;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/index5.css"/>
  </head>
  <body>
    <div class="parent">
      <div class="div1"></div>
      <div class="div2"></div>
      <div class="clean_float"></div>
      
      <div>aaaaaaaaaa</div>
    </div>
  </body>
</html>

清除浮动方式二

.parent{
  border: 1px solid red;
}
.div1{
  width: 100px;
  height: 100px;
  background-color: pink;
  float:  left;
}
.div2{
  width: 200px;
  height: 200px;
  background-color: greenyellow;
  float: left;
}
.clearfix::after{
  content: "";/*在div后面追加一个内容*/
  display: block;
  height: 0;
  clear: both;/*清除浮动*/
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/index6.css"/>
  </head>
  <body>
    <div class="parent clearfix">
      <div class="div1"></div>
      <div class="div2"></div>
    </div>
    <div>aaaaaaaaaa</div>
    
  </body>
</html>

css常用指南，浮动、清除浮动、展示栏实例_html

展示栏实例

ul,div,li,body{
  margin: 0;
  padding: 0;
}
.article{
  width: 700px;
  height: 200px;
  border: 1px solid #d8d8d8;
}

.article>header{
  width: 700px;
  height: 30px;
  background-image: url(../img/bmg1.png);
  color: white;
  font-size: 14px;
  line-height: 30px;
}
.article>header>.h_left{
  float: left;
  margin-left: 20px;
}
.article>header>.h_right{
  float: right; 
  margin-right: 20px;
}
.clearfix::after{
  content: "";
  display: block;
  height: 0px;
  clear: both;
  
}
.content{
  background-color: #f8f8f8 ;
}
.content>ul{
  width: 300px;
  float: left;
  margin: 10px;
  list-style: none ;
  line-height: 25px;
  font-size: 12px;
}
.content>ul>li>a{
  float: left;
  text-decoration: none;
  color: #333333;
  padding-left: 20px ;
  
  background: url(../img/list.jpg) no-repeat 10px 12px;
  
}

.content>ul>li>span{
  float: right;
  color: #6f99ad;
}

.content>ul>li::after{
  content: "";
  display: block;
  height: 0px;
  clear: both;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/work.css"/>
  </head>
  <body>
    <article class="article">
      <header class="clearfix"><span class="h_left">web</span><span class="h_right">更多</span></header>
      <div class="content clearfix">
        <ul >
          <li><a href="">11111111111111111111</a><span>1111</span></li>
          <li><a href="">11111111111111111111</a><span>1111</span></li>
          
          <li><a href="">11111111111111111111</a><span>1111</span></li>
          
          <li><a href="">11111111111111111111</a><span>1111</span></li>
          
          <li><a href="">11111111111111111111</a><span>1111</span></li>
          
          <li><a href="">11111111111111111111</a><span>1111</span></li>
          
        </ul>
        <ul>
          <li><a href="">11111111111111111111</a><span>1111</span></li>
          <li><a href="">11111111111111111111</a><span>1111</span></li>
          
          <li><a href="">11111111111111111111</a><span>1111</span></li>
          
          <li><a href="">11111111111111111111</a><span>1111</span></li>
          
          <li><a href="">11111111111111111111</a><span>1111</span></li>
          
          <li><a href="">11111111111111111111</a><span>1111</span></li>
        </ul>
      </div>
    </article>
  </body>
</html>

css常用指南，浮动、清除浮动、展示栏实例_css_02