首页 > 代码库 > 防止父元素坍塌的清楚浮动clear

防止父元素坍塌的清楚浮动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>

效果如下:

技术分享

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