css 清浮动方法(总结8种方法)

Posted 黑木令

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 清浮动方法(总结8种方法)相关的知识，希望对你有一定的参考价值。

1. 父级 div 定义 height

1. 父级 div 手动定义 height, 就解决了父级 div 无法自动获取到高度的问题 。
2.  只适合高度固定的布局, 要给出精确的高度, 如果高度和父级div不一样时, 会产生问题 。

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

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

2. 父级 div 也一起浮动

  1. 所有代码一起浮动, 就变成了一个整体 。
  2. 会产生新的浮动问题 。

3. 父级 div 定义 overflow:hidden (比较稳妥的办法)

	1. 必须定义 width 或 zoom:1, 同时不能定义 height, 使用 overflow:hidden 时, 浏览器会自动检查浮动区域的 。
	2. 不能和 position 配合使用, 因为超出的尺寸的会被隐藏 。

4. 父级 div 定义 overflow:auto

1. 必须定义 width 或 zoom:1, 同时不能定义 height, 使用 overflow:auto 时, 浏览器会自动检查浮动区域的高度。
2. 内部宽高超过父级 div 时, 会出现滚动条 。

5. 父级 div 定义 伪类:after 和 zoom (最为稳妥的方法)

1.  IE8 以上和非IE浏览器才支持 :after 。
2.  zoom (IE专有属性)可解决 ie6,ie7 浮动问题

<body>
  <div class="div1 clearfloat">
    <div class="left">Left</div>
    <div class="right">Right</div>
  </div>
  <div class="div2">测试div</div>
</body>

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

6. 结尾处加空 div 标签 并给它设置 clear:both

  1. 添加一个空 div, 利用 css 提高的 clear:both 清除浮动, 让父级 div 能自动获取到高度 。
  2. 如果页面浮动布局多, 就要增加很多空div, 让人感觉很不好
<body>
  <div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clearfloat"></div>
  </div>
  <div class="div2">测试div</div>
</body>

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

7. 父级 div 定义 display:table

  1. 将 div 属性变成表格 。
  2. 会产生新的未知问题 。

8. 结尾处加 br 标签 clear:both

 1. 父级 div 定义 zoom:1 来解决IE浮动问题, 结尾处加 br标签 clear:both

以上是关于css 清浮动方法(总结8种方法)的主要内容，如果未能解决你的问题，请参考以下文章

css清除浮动float的三种方法总结

css清楚浮动的方法

ss清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？

CSS清除浮动大全共8种方法

2018.12.8浮动布局,display总结,overflow,清浮动

[Web 前端] 018 css 清除浮动的四种方法