防止父元素坍塌的清楚浮动clear

如果父元素没有设置高度，其中子元素全部带float属性，父元素内部将没有任何普通流元素而坍塌。

想要解决这件事情，只需添加一个空的块状子元素，并设置clear属性，即可让父元素自动包裹该元素，

从而达到包裹所有浮动子元素的目的。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<style>
  .container{
      margin:30px auto;
      width:600px;
      height:300px;
      border-style:dotted 
  }
  
  .p{
      border:solid 3px red;
  }
  
  .c{
      width:100px;
      height:100px;
      background-color:green;
      margin:10px;
      float:left;
  }
  
  /* 利用伪类实现清楚浮动 */
  .p:after{
      content:"";
      display:block;
      clear:left;
  }
</style>
<body>
    <div class="container">
        <div class="p">
            <div class="c"></div>
            <div class="c"></div>
            <div class="c"></div>
  /* 也可以追加一个div来实现清楚浮动 原理是一样的，都是新加一个块级元素来清楚浮动，让父元素包裹自己 */

           <div style="clear:left"></div>


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

效果如下：

posted @ 2017-06-26 15:58  懒先生的夫人  阅读(431)  评论(0)  编辑  收藏  举报