CSS中的浮动清除

先来看一个实验：现在有两个div，div身上没有任何属性。每个div中都有li，这些li都是浮动的。

　　理想的效果：可实际的效果：

这个地方就涉及到浮动，因为两个父元素div都没有高度（或者小于子元素的高度），所以不能给浮动的孩子一个容器，所以后边的li还拼命的往上面的最后一个li靠近。

清除浮动就是要给父元素加一个大于等于子元素高度的高度。

1、清除浮动：给父元素一个高度，让其子元素在父元素中浮动。只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。

2、清除浮动：在工作中，大部分父元素是不给高度的，因为子元素的高度可以撑起父元素的高度。那么不写高度还要清除浮动的影响就要开启一种新方法，使用clear:both;去清除浮动的影响。例如：

<!DOCTYPE html>
<html>
  <head>
    <title>清除浮动</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
        *{margin:0;padding:0;}
        li{
            float:left;
            width:140px;
            height:40px;
            background:blue;
        }
        .box{clear:both;}
    </style>
  </head>
  
  <body>
   <div>
           <ul>
               <li>HTML</li>
               <li>CSS</li>
               <li>JS</li>
               <li>AJAX</li>
           </ul>
   </div>
   <div class="box">
           <ul>
               <li>英语</li>
               <li>数学</li>
               <li>体育</li>
           </ul>
   </div>
  </body>
</html>

实际效果：

此时已经清除了浮动，但是，你去设置第二个盒子的margin-top:10px;时，会发现margin失效了，根本就不能让他们有间隔。此时就需要第三种方法了。

3、隔墙法

　　虽然他们不能用margin设置间隔，但是我们可以再两个盒子之间再加上一个盒子，用这个盒子去撑起一个间隔，就像一堵墙。

<!DOCTYPE html>
<html>
  <head>
    <title>清除浮动</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
        *{margin:0;padding:0;}
        li{
            float:left;
            width:140px;
            height:40px;
            background:blue;
        }
        .cl{
            clear:both;
            height:18px;
        }
    </style>
  </head>
  
  <body>
   <div>
           <ul>
               <li>HTML</li>
               <li>CSS</li>
               <li>JS</li>
               <li>AJAX</li>
           </ul>
   </div>
   <div class="cl"></div>
   <div class="box">
           <ul>
               <li>英语</li>
               <li>数学</li>
               <li>体育</li>
           </ul>
   </div>
  </body>
</html>

实际效果：

4、内墙法（这个特别有用，这样的话就不用设置父元素的高，而且比较智能的修改父元素的高，这样的话，父元素的背景就可以智能的修改高度了。）

　　就是把上例中的外墙放到第一个div里面。这个时候会出现一个特性，看如下代码：

<!DOCTYPE html>
<html>
    <style type="text/css">
        *{margin:0;padding:0;}
        div{
            background:green;
        }
        p{
            float:left;
            width:100px;
            height:40px;
            background:blue;
        }
　　　　　.cl{
　　　　　　　　clear:both;
　　　　　}
    </style>
  </head>
  
  <body>
   <div>
           <p></p>
　　　　　　<!-- <div class="cl"></div>-->

   </div>
  </body>
</html>

先分析下这段代码，这个结果会因为p的脱标而只显示p的背景色，可是如果我们加上一个内墙，即<div class="cl"></div>，会因为浮动的清除而撑起父元素的高。

未清除浮动的效果：

清除浮动的效果：

归根结底：一个父元素不能被脱标的儿子撑起一个高度，但是清除浮动后，脱标地儿子也可以撑起父元素的高度。如下图可以当做一个公式来记忆。

5、overflow:hidden;清除浮动。

　　本意是移除边框的东西给他清除掉，但是他可以用来做一些偏方。一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了并且margin也会有效了。这是一个偏方。请看如下代码：

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
        *{margin:0;padding:0;}
        div{
            border:10px solid black;
            overflow:hidden;
        }
        .p1{
            float:left;
            width:40px;
            height:140px;
            background:blue;
        }
        .p2{
            float:left;
            width:40px;
            height:240px;
            background:yellow;
        }
        .p3{
            float:left;
            width:40px;
            height:80px;
            background:red;
        }
    </style>
  </head>
  
  <body>
   <div>
           <p class="p1"></p>
           <p class="p2"></p>
           <p class="p3"></p>
   </div>
  </body>
</html>

运行结果：

6、清除浮动的小例子：

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
        *{margin:0;padding:0;}
        div{
            width:400px;
            border:1px solid black;
            margin:20px auto;
        }
        div ul {
            list-style:none;
            
        }
        div ul li{
            border-bottom:1px dashed gray;
            overflow:hidden;
        }
        div ul li .title{
            float:left;
        }
        div ul li .date{
            float:right;
        }
    </style>
  </head>
  
  <body>
   <div>
           <ul>
               <li><span class="title">我是新闻1</span><span class="date">2016/7/25</span></li>
               <li><span class="title">我是新闻2</span><span class="date">2016/7/25</span></li>
               <li><span class="title">我是新闻3</span><span class="date">2016/7/25</span></li>
               <li><span class="title">我是新闻4</span><span class="date">2016/7/25</span></li>
               <li><span class="title">我是新闻5</span><span class="date">2016/7/25</span></li>
               <li><span class="title">我是新闻6</span><span class="date">2016/7/25</span></li>
           </ul>
   </div>
  </body>
</html>

如果没有li标签的overflow会因为li标签没有高度，而儿子span又是脱标的会撑不起li的高度。对li标签加上overflow之后就会使span撑起li标签的高度（一定是给父元素加）。另外，加overflow是最简单的，也可以使用内墙法，但是不可以在两个li标签之间用隔墙法，因为ul中除了li标签不能添加其他标签。

posted @ 2016-07-25 13:53 苏羽垄阅读(303) 评论(0) 收藏举报

刷新页面返回顶部

苏羽垄

CSS中的浮动清除

公告