css中folat浮动

游鹄君大约 2 分钟

示例1

<!DOCTYPE html>
<html>
  <head>
   <title>css当中的float浮动</title>
   <meta charset="utf-8" />
   <link href="" type="text/css" rel="stylesheet" />
   <style>
     div{
      width:300px;
      height:300px;
      border:1px solid red;
     }
     #left{
      background:blue;
      
      /*让当前元素左浮动*/
      float:left;
     }
     #right{
      background:red;
      
      /*让当前元素右浮动*/
      float:right;
     }
     #center{
      background:yellow;
      
      float:right;
     }
   </style>
  </head>
  <body>
   <h1>css当中的float浮动</h1>
   <div id="left"></div>
   <div id="right"></div>
   <div id="center"></div>
  </body>
</html>

示例2:

<!DOCTYPE html>
<html>
  <head>
   <title>css属性当中的float浮动</title>
   <meta charset="utf-8" />
   <link href="" type="text/css" rel="stylesheet" />
   <style>
     #bbox{
      width:800px;
      height:600px;
      border:1px solid red;
      margin:0px auto;
     }
     #bbox #left{
      width:300px;
      height:300px;
      border:1px solid blue;
      
      float:left;
     }
     #bbox #right{
      width:400px;
      height:400px;
      border:1px solid #fc0;
      
      float:right;
     }
     #bbox .bottom{
      width:800px;
      height:20px;
      background:pink;
      
      clear:both;
     }
     #bbox #center{
      width:500px;
      height:100px;
      border:1px solid green;
     }
   </style>
  </head>
  <body>
   <h1>css属性当中的float浮动</h1>
   <div id="bbox">
     我是大盒子
     
     <div id="left">
      我是左侧的div
     </div>
     
     <div id="right">
      我是右侧的div
     </div>
     
     <!--此bottom是一个卡子！它把浮动无视了！-->
     <div class="bottom">
      
     </div>
     
     <div id="center">
      我是下边的div
     </div>
   </div>
  </body>
</html>

示例3

<!DOCTYPE html>
<html>
  <head>
   <title>float的实际应用</title>
   <meta charset="utf-8" />
   <link href="" type="text/css" rel="stylesheet" />
   <style>
     *{
      margin:0px;
      padding:0px;
     }
     /*第一个实例的css*/
     .nav{
      width:800px;
      height:45px;
      border:1px solid red;
     }
     .nav #one{
      list-style:none;
     }
     .nav #one li{
      border:1px solid blue;
      float:left;
      padding:10px;
      margin-right:10px;
     }
     
     
     
     /*第二个实例的css*/
     .nav #two{
      list-style:none;
     }
     .nav #two li{
      float:left;
      border:1px solid blue;
      padding:11px 0px;
      width:100px;
      text-align:center;
     }
     .nav #two li:hover{
      cursor:pointer;
      background:pink;
     }
     .nav #two li ol{
      display:none;
      list-style:none;
      position:absolute;
      margin-top:10px;
      
     }
     .nav #two li ol li{
      float:none;
      width:100px;
      padding:10px 0px;
     }
     .nav #two li:hover ol{
      display:block;
     }
     
     
     /*第三个实例的css*/
     .hua{
      width:100px;
      height:40px;
      background:#ddd;
      border-radius:0px 10px 10px 0px;
      
      /*过渡效果(过渡属性、过渡时间、延迟时间)*/
      transition:all 1s 0.2s;
     }
     .hua:hover{
      width:500px;
      background:#c81623;
     }
   </style>
  </head>
  <body>
   <h1>float的实际应用</h1>
   <!--1.导航栏-->
   <h2>1.导航栏</h2>
   <div class="nav">
     <ul id="one">
      <a href='#'><li>秒杀</li></a>
      <a href='#'><li>优惠券</li></a>
      <a href='#'><li>闪购</li></a>
      <a href='#'><li>拍卖</li></a>
      <li>|</li>
      <a href='#'><li>服装城</li></a>
      <a href='#'><li>京东超市</li></a>
      <a href='#'><li>生鲜</li></a>
      <a href='#'><li>全球购</li></a>
      <a href='#'><li>京东金融</li></a>
     </ul>
   </div>
   
   <!--2.下拉菜单-->
   <h2>2.下拉菜单</h2>
   <div class="nav">
     <ul id="two">
      <li>
        精品课程
        <ol>
         <li>PHP培训</li>
         <li>JAVA培训</li>
         <li>大数据培训</li>
         <li>UI/UE培训</li>
         <li>H5培训</li>
        </ol>
      </li>
      <li>
        兄弟连论坛
        <ol>
         <li>PHP培训</li>
         <li>JAVA培训</li>
         <li>大数据培训</li>
         <li>UI/UE培训</li>
         <a href='./1.html'><li>H5培训</li></a>
        </ol>
      </li>
      <li>占地日记</li>
      <li>技术交流</li>
     </ul>
   </div>
   
   <!--3.滑块-->
   <h2>3.滑块</h2>
   <div class="hua">
     
   </div>
  </body>
</html>