zoukankan html css js c++ java

清除浮动——让包围元素包含浮动元素的四种方法

什么是CSS清除浮动？

在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

有一段代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>让包围元素在视觉上包含浮动元素</title>
    <style>
      .news{
          background: gray;
          border:1px solid black;
      }

      .new img{
          float: left;
      }

      .news p{
          float: right;
      }
    </style>
</head>
<body>
    <p>通过css增加内容，然后清理，display设置为block，height为0，visibility设置为hidden</p>
    <div class="news">
        <img src="logo.bmp" alt="my image">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem voluptatum quisquam incidunt eligendi commodi, provident sit reiciendis maxime corporis sunt doloremque mollitia magnam eum totam? Nihil totam, voluptas cum nesciunt.</p>
    </div>
</body>
</html>

在上面这段代码中。因为图片和文本都被浮动，脱离了文档流，所以包围图片和文本的div不占据空间，如果我们不做什么改变的话，包围元素div是无法包含浮动元素的。所以下面介绍四种方法来清除浮动，实现包围元素包含浮动元素的效果。

1 添加一个空元素然后清理它

在这里，我们通过在div中添加一个空元素，即br，然后清理它，当然也可以使用div、hr等元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>让包围元素在视觉上包含浮动元素</title>
    <style>
         .news{
             border:1px solid black;
             background-color: gray;
         
         }

        .news p{
            float: right;
                 width: 500px;
                padding:20px;

        }

        .news img{
            float: left;
        }

        .both{
            clear: both;
        }
    </style>
</head>
<body>
<p>增加额外元素，进行清理</p>
    <div class="news">
        <img src="logo.bmp" alt="my image">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit sunt 
        officia exercitationem ullam dolores possimus vitae laborum dolor amet 
harum, dicta expedita nam rerum vel quas, voluptatem deserunt labore dignissimo
</p>
        <br class="both"/>
    </div>
</body>
</html>

2 浮动容器

此处原本div是不浮动的，我们给div加入float:left，让其浮动起来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>让包围元素在视觉上包含浮动元素</title>
    <style>
         .news{
             border:1px solid black;
             background-color: gray;
                float: left;
         
         }

        .news p{
            float: right;
                width: 500px;
                padding:20px;

        }

        .news img{
            float: left;
        }


    </style>
</head>
<body>
<p>将容器进行浮动</p>
    <div class="news">
        <img src="logo.bmp" alt="my image">
        <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum aliquid sequi eius. Cum nesciunt quae velit placeat, autem nulla doloremque. Ipsa nostrum voluptatibus libero fugiat vero! Sequi officiis, molestias minus!
</p>
        
    </div>
</body>
</html>

3.设置容器的overflow属性值为auto或hidden

当一个容器的overflow属性值为auto或hidden时，会有一个副作用——清理包含的所有浮动元素。

在这里，我们将div的overflow属性值设置为auto。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>让包围元素在视觉上包含浮动元素</title>
    <style>
         .news{
             border:1px solid black;
             background-color: gray;
                overflow: auto;
         
         }

        .news p{
            float: right;
                width: 500px;
                padding:20px;

        }

        .news img{
            float: left;
        }


    </style>
</head>
<body>
<p>容器设置overflow的属性值为auto或者为hidden</p>
    <div class="news">
        <img src="logo.bmp" alt="my image">
        <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum aliquid sequi eius. Cum nesciunt quae velit placeat, autem nulla doloremque. Ipsa nostrum voluptatibus libero fugiat vero! Sequi officiis, molestias minus!
</p>
        
    </div>
</body>
</html>

4 利用伪类after添加内容并清理

添加一个”.“,并将清理，设置display为block，visibility为hidden，height为0才不会影响布局，显示出来。

需要注意的是为了IE6和IE7浏览器，要给clear这个class添加一条zoom:1;触发haslayout。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>让包围元素在视觉上包含浮动元素</title>
    <style>
      .news{
          background: gray;
          border:1px solid black;
      }

      .new img{
          float: left;
      }

      .news p{
          float: right;
      }

      .clear:after{
          content: ".";
          display: block;
          visibility: hidden;
          height: 0;
          clear: both;
      }

.clear {
  /* 触发 hasLayout */ 
  zoom: 1; 
 }

    </style>
</head>
<body>
    <p>通过css增加内容，然后清理，display设置为block，height为0，visibility设置为hidden</p>
    <div class="news clear">
        <img src="logo.bmp" alt="my image">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem voluptatum quisquam incidunt eligendi commodi, provident sit reiciendis maxime corporis sunt doloremque mollitia magnam eum totam? Nihil totam, voluptas cum nesciunt.</p>
    </div>
</body>
</html>