0
点赞
收藏
分享

微信扫一扫

解决子元素浮动导致父元素高度塌陷的问题(清除浮动的方法)

1. 浮动的元素会覆盖后面处于文档流中的元素

<html>
<head>
<style type="text/css">
   .box-1{
        float:left;
        width:200px;
        height:200px;
        background-color:#333;
    }
    .box-2{
        width:200px;
        height:300px;
        background-color:#ccc;
    }
</style>
</head>

<body>
  <div class="box-1"></div>
  <div class="box-2"></div>
</body>

</html>

解决:只要给box-2(与浮动元素同级的元素)清除浮动就行了

<html>
<head>
<style type="text/css">
   .box-1{
        float:left;
        width:200px;
        height:200px;
        background-color:#333;
    }
    .box-2{
        width:200px;
        height:300px;
        background-color:#ccc;
        clear:both;
    }
</style>
</head>

<body>
  <div class="box-1"></div>
  <div class="box-2"></div>
</body>

</html>

2. 浮动元素会导致父元素高度坍塌

(1) 问题描述

<html>
<head>
<style type="text/css">
   .div1{background:#000080;border:1px solid red;}
   .div1 .left{float:left;width:20%;height:200px;background:#DDD}
   .div1 .right{float:right;width:30%;height:80px;background:#DDD}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}

</style>
</head>

<body>
  <div class="div1 clearfloat"> 
    <div class="left">Left浮动</div> 
    <div class="right">Right浮动</div> 
  </div>
  <div class="div2">
    div2
  </div>
</body>

</html>

(2) 问题分析

(3) 解决:解决思路主要是为父级清除浮动从而使父级div能获取到高度。

  • 方案一(父级方法):为父级div添加伪类after,并清除浮动
     display:block;
     content:"";
     clear:both;

即:

<html>
<head>
<style type="text/css">
   .div1{background:#000080;border:1px solid red;}
   .div1 .left{float:left;width:20%;height:200px;background:#DDD}
   .div1 .right{float:right;width:30%;height:80px;background:#DDD}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
   
   /*清除浮动代码*/
   .clearfloat:after{display:block;content:"";clear:both;}
</style>
</head>

<body>
  <div class="div1 clearfloat"> 
    <div class="left">Left浮动</div> 
    <div class="right">Right浮动</div> 
  </div>
  <div class="div2">
    div2
  </div>
</body>

</html>

  • 方案二(子级方法):在浮动的子元素尾部添加一个同级的空div标签或(br标签),并清除浮动
     clear:both;

即:

<html>
<head>
<style type="text/css">
   .div1{background:#000080;border:1px solid red;}
   .div1 .left{float:left;width:20%;height:200px;background:#DDD}
   .div1 .right{float:right;width:30%;height:80px;background:#DDD}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
   
   /*清除浮动代码*/
   .clearfloat{clear:both}
</style>
</head>

<body>
  <div class="div1 clearfloat"> 
    <div class="left">Left浮动</div> 
    <div class="right">Right浮动</div> 
    <div class="clearfloat"></div>
    /*<br class="clearfloat" />*/
</div>
  </div>
  <div class="div2">
    div2
  </div>
</body>

</html>

  • 方案三(父级方法):为父级设置高度
<html>
<head>
<style type="text/css">
   .div1{background:#000080;border:1px solid red;height:200px;}
   .div1 .left{float:left;width:20%;height:200px;background:#DDD}
   .div1 .right{float:right;width:30%;height:80px;background:#DDD}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
   
</style>
</head>

<body>
  <div class="div1 clearfloat"> 
    <div class="left">Left浮动</div> 
    <div class="right">Right浮动</div> 
</div>
  </div>
  <div class="div2">
    div2
  </div>
</body>

</html>

  • 方案四(父级方法):为父级设置overflow:hidden
<html>
<head>
<style type="text/css">
   .div1{background:#000080;border:1px solid red;overflow:hidden}
   .div1 .left{float:left;width:20%;height:200px;background:#DDD}
   .div1 .right{float:right;width:30%;height:80px;background:#DDD}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
   
   /*清除浮动代码*/
   /*.clearfloat:after{display:block;content:"";clear:both;}*/
   /*.clearfloat{clear:both}*/
</style>
</head>

<body>
  <div class="div1 clearfloat"> 
    <div class="left">Left浮动</div> 
    <div class="right">Right浮动</div> 
</div>
  </div>
  <div class="div2">
    div2
  </div>
</body>

</html>

  • 方案五(父级方法):为父级设置display:inline-block
<html>
<head>
<style type="text/css">
   .div1{background:#000080;border:1px solid red;display:inline-block}
   .div1 .left{float:left;width:20%;height:200px;background:#DDD}
   .div1 .right{float:right;width:30%;height:80px;background:#DDD}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
   
   /*清除浮动代码*/
   /*.clearfloat:after{display:block;content:"";clear:both;}*/
   /*.clearfloat{clear:both}*/
</style>
</head>

<body>
  <div class="div1 clearfloat"> 
    <div class="left">Left浮动</div> 
    <div class="right">Right浮动</div> 
</div>
  </div>
  <div class="div2">
    div2
  </div>
</body>

</html>

  • 方案六(父级方法):为父级设置overflow:auto
<html>
<head>
<style type="text/css">
   .div1{background:#000080;border:1px solid red;overflow:auto;}
   .div1 .left{float:left;width:20%;height:200px;background:#DDD}
   .div1 .right{float:right;width:30%;height:80px;background:#DDD}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
   
   /*清除浮动代码*/
   /*.clearfloat:after{display:block;content:"";clear:both;}*/
   /*.clearfloat{clear:both}*/
</style>
</head>

<body>
  <div class="div1 clearfloat"> 
    <div class="left">Left浮动</div> 
    <div class="right">Right浮动</div> 
</div>
  </div>
  <div class="div2">
    div2
  </div>
</body>

</html>

  • 方案七(父级方法):为父级设置display:table
<html>
<head>
<style type="text/css">
   .div1{background:#000080;border:1px solid red;display:table;width:100%}
   .div1 .left{float:left;width:20%;height:200px;background:#DDD}
   .div1 .right{float:right;width:30%;height:80px;background:#DDD}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
   
   /*清除浮动代码*/
   /*.clearfloat:after{display:block;content:"";clear:both;}*/
   /*.clearfloat{clear:both}*/
</style>
</head>

<body>
  <div class="div1 clearfloat"> 
    <div class="left">Left浮动</div> 
    <div class="right">Right浮动</div> 
</div>
  </div>
  <div class="div2">
    div2
  </div>
</body>

</html>

拓展:浮动布局多用于需要文字环绕的时候,毕竟这才是浮动真正的用武之地;水平排列可使用inline-block了,参考css之display:inline-block布局

举报

相关推荐

清除浮动的方法

0 条评论