资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/清除浮动

清除浮动

zhisheng / 1956人阅读

摘要：还有几种乱七八糟的清除浮动方法，但是缺点多，故不提起，了解可参考

浮动的目的：把多个盒子放在一行上
清除浮动的目的：解决父盒子高度为0的问题
清除浮动，也称闭合浮动
注：本文不兼容IE6

未清除浮动实现情况：

清除后：

原代码：

</>复制代码 
  1. DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>清除浮动title>
  6. <style type="text/css">
  7. .content{
  8. width:960px;
  9. margin:100px auto;
  10. border: 1px solid #ccc;
  11. }
  12. .left{
  13. width:400px;
  14. height: 200px;
  15. background-color: green;
  16. float: left;
  17. }
  18. .right{
  19. width: 400px;
  20. height: 200px;
  21. background-color: red;
  22. float: right;
  23. }
  24. style>
  25. head>
  26. <body>
  27. <div class="content">
  28. <div class="left">div>
  29. <div class="right">div>
  30. div>
  31. body>
  32. html>

 

具体方法：
1.额外标签法
在含浮动标签后加兄弟盒子清除浮动
例：

</>复制代码 
  1. DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>清除浮动title>
  6. <style type="text/css">
  7. .content{
  8. width:960px;
  9. margin:100px auto;
  10. border: 1px solid #ccc;
  11. }
  12. .left{
  13. width:400px;
  14. height: 200px;
  15. background-color: green;
  16. float: left;
  17. }
  18. .right{
  19. width: 400px;
  20. height: 200px;
  21. background-color: red;
  22. float: right;
  23. }
  24. .clearbox{
  25. clear:both;
  26. }
  27. style>
  28. head>
  29. <body>
  30. <div class="content">
  31. <div class="left">div>
  32. <div class="right">div>
  33. <div class="clearbox">div>
  34. div>
  35. body>
  36. html>


缺点：添加了许多空div

2.给父盒子overflow:hidden
触发bfc模式（该名词不懂请谷歌/百度，初学者可暂时略过)，直接清除浮动

</>复制代码 
  1. DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>清除浮动title>
  6. <style type="text/css">
  7. .content{
  8. width:960px;
  9. margin:100px auto;
  10. border: 1px solid #ccc;
  11. overflow: hidden;
  12. }
  13. .left{
  14. width:400px;
  15. height: 200px;
  16. background-color: green;
  17. float: left;
  18. }
  19. .right{
  20. width: 400px;
  21. height: 200px;
  22. background-color: red;
  23. float: right;
  24. }
  25. .clearbox{
  26. clear:both;
  27. }
  28. style>
  29. head>
  30. <body>
  31. <div class="content">
  32. <div class="left">div>
  33. <div class="right">div>
  34. div>
  35. body>
  36. html>

缺点：不可与position属性配合使用

3.伪元素法
给父元素定义伪类:after(此处使用的是公共类clearfix）

</>复制代码 
  1. .clearfix:after{
  2. content:"";/*内容为空*/
  3. visibility:hidden;/*将元素隐藏，但是在网页中该占的位置还是占着*/
  4. display:block;/*变成块级元素*/
  5. height:0;
  6. clear:both;/*清除浮动*/
  7. }

 

具体代码：

</>复制代码 
  1. DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>清除浮动title>
  6. <style type="text/css">
  7. .clearfix:after{
  8. content:"";/*内容为空*/
  9. visibility:hidden;/*将元素隐藏，但是在网页中该占的位置还是占着*/
  10. display:block;/*变成块级元素*/
  11. height:0;
  12. clear:both;/*清除浮动*/
  13. }
  14. .content{
  15. width:960px;
  16. margin:100px auto;
  17. border: 1px solid #ccc;
  18. }
  19. .left{
  20. width:400px;
  21. height: 200px;
  22. background-color: green;
  23. float: left;
  24. }
  25. .right{
  26. width: 400px;
  27. height: 200px;
  28. background-color: red;
  29. float: right;
  30. }
  31. .clearbox{
  32. clear:both;
  33. }
  34. style>
  35. head>
  36. <body>
  37. <div class="content clearfix">
  38. <div class="left">div>
  39. <div class="right">div>
  40. div>
  41. body>
  42. html>

 


缺点：IE8以上和非IE浏览器才支持

4.双伪元素法
给父类加上伪类:before和:after

</>复制代码 
  1. .clearfix:before,.clearfix:after{
  2. content:"";
  3. display:table;
  4. }
  5. .clearfix:after{
  6. clear:both;
  7. }

具体代码：

</>复制代码 
  1. DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>清除浮动title>
  6. <style type="text/css">
  7. .clearfix:before,.clearfix:after{
  8. content:"";
  9. display:table;
  10. }
  11. .clearfix:after{
  12. clear:both;
  13. }
  14. .content{
  15. width:960px;
  16. margin:100px auto;
  17. border: 1px solid #ccc;
  18. }
  19. .left{
  20. width:400px;
  21. height: 200px;
  22. background-color: green;
  23. float: left;
  24. }
  25. .right{
  26. width: 400px;
  27. height: 200px;
  28. background-color: red;
  29. float: right;
  30. }
  31. .clearbox{
  32. clear:both;
  33. }
  34. style>
  35. head>
  36. <body>
  37. <div class="content clearfix">
  38. <div class="left">div>
  39. <div class="right">div>
  40. div>
  41. body>
  42. html>

附：
对于上述4种方法，优先推荐方法3和4，当然1和2也可，可根据具体情况使用。
还有几种乱七八糟的清除浮动方法，但是缺点多，故不提起，了解可参考：
http://www.jb51.net/css/173023.html

云服务器 GPU云服务器 清除浮动 html浮动向上浮动 上下浮动 左右浮动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2241.html

相关文章

  • 关于浮动与清除浮动，你应该知道的

    摘要：清除浮动并不是说让浮动元素回到文档流清除浮动只会改变改元素自身的位置，并且只针对排在该元素前面的元素。 我在做页面布局的时候，多多少少总会受到来自浮动的困扰，因此专门通过实践来总结一下浮动与清除浮动。 首先总结几个基础的概念： 浮动：设置浮动的元素会脱离文档流，不会影响块元素的布局，但是会影响内联元素的排列[通常是文本]； 文档流：在文档流中，块元素会单个元素独占一行 接下来我们通过实...

    mengbo 评论0 收藏0

  • 关于浮动与清除浮动，你应该知道的

    摘要：清除浮动并不是说让浮动元素回到文档流清除浮动只会改变改元素自身的位置，并且只针对排在该元素前面的元素。 我在做页面布局的时候，多多少少总会受到来自浮动的困扰，因此专门通过实践来总结一下浮动与清除浮动。 首先总结几个基础的概念： 浮动：设置浮动的元素会脱离文档流，不会影响块元素的布局，但是会影响内联元素的排列[通常是文本]； 文档流：在文档流中，块元素会单个元素独占一行 接下来我们通过实...

    masturbator 评论0 收藏0

  • 关于浮动与清除浮动，你应该知道的

    摘要：清除浮动并不是说让浮动元素回到文档流清除浮动只会改变改元素自身的位置，并且只针对排在该元素前面的元素。 我在做页面布局的时候，多多少少总会受到来自浮动的困扰，因此专门通过实践来总结一下浮动与清除浮动。 首先总结几个基础的概念： 浮动：设置浮动的元素会脱离文档流，不会影响块元素的布局，但是会影响内联元素的排列[通常是文本]； 文档流：在文档流中，块元素会单个元素独占一行 接下来我们通过实...

    Donald 评论0 收藏0

  • 关于浮动与清除浮动，你应该知道的

    摘要：清除浮动并不是说让浮动元素回到文档流清除浮动只会改变改元素自身的位置，并且只针对排在该元素前面的元素。 我在做页面布局的时候，多多少少总会受到来自浮动的困扰，因此专门通过实践来总结一下浮动与清除浮动。 首先总结几个基础的概念： 浮动：设置浮动的元素会脱离文档流，不会影响块元素的布局，但是会影响内联元素的排列[通常是文本]； 文档流：在文档流中，块元素会单个元素独占一行 接下来我们通过实...

    ideaa 评论0 收藏0

  • 清除浮动的方法

    摘要：前言本文主要介绍清除浮动的种风方法及利弊浮动对页面的影响如果一个父级块元素中的子元素浮动，那么所有浮动的子元素都脱离了文档流，如果父元素无法确定高度，则其下面的兄弟元素会自动补位，造成视图结构混乱，所以这个时候要进行清除浮动。 前言： 本文主要介绍清除浮动的4种风方法及利弊 浮动对页面的影响： 如果一个父级块元素中的子元素浮动，那么所有浮动的子元素都脱离了文档流，如果父元素无法确定高度...

    Alex 评论0 收藏0

发表评论

登陆后可评论

0条评论

zhisheng

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<