经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
CSS浮动
来源：cnblogs　　作者：熔岩魔神　　时间：2020/11/9 15:18:45　　对本文有异议

浮动定位指：

  • 将元素排除在普通流之外
  • 元素将不再页面中占据空间
  • 将浮动元素放置在包含框的左边或者右边
  • 浮动元素依旧位于包含框之内

浮动的框可以向左或者向右移动直到他的外边缘碰到包含框或另一个浮动框的边框为止

浮动元素的外边缘不会超过其父元素的内边缘

浮动元素不会重叠

浮动元素不会上下浮动

任何元素一旦浮动，display属性将完全失效均可以设置宽高，并且不会独占一行

浮动语法：float：none/left/right

设置三个div，颜色分别为蓝黄绿，代码如下：

  1.  1 <!DOCTYPE html>
  2.  2 <html lang="en">
  3.  3 <head>
  4.  4     <meta charset="UTF-8">
  5.  5     <title>浮动</title>
  6.  6     <style>
  7.  7         #box{
  8.  8             width: 600px;
  9.  9             height: 600px;
  10. 10             background: red;
  11. 11         }
  12. 12         #box>div{
  13. 13             width: 200px;
  14. 14             height:200px;
  15. 15         }
  16. 16         #box>div:first-child{
  17. 17             background: blue;
  18. 18         }
  19. 19         #box>div:nth-child(2){
  20. 20             background: yellow;
  21. 21         }
  22. 22         #box>div:nth-child(3){
  23. 23             background: green;
  24. 24         }
  25. 25     </style>
  26. 26 </head>
  27. 27 <body>
  28. 28     <div id="box">
  29. 29         <div></div>
  30. 30         <div></div>
  31. 31         <div></div>
  32. 32     </div>
  33. 33 </body>
  34. 34 </html>

这里先将第一个div左浮动一下： 

 

  1.  1 <!DOCTYPE html>
  2.  2 <html lang="en">
  3.  3 <head>
  4.  4     <meta charset="UTF-8">
  5.  5     <title>浮动</title>
  6.  6     <style>
  7.  7         #box{
  8.  8             width: 600px;
  9.  9             height: 600px;
  10. 10             background: red;
  11. 11         }
  12. 12         #box>div{
  13. 13             width: 200px;
  14. 14             height:200px;
  15. 15         }
  16. 16         #box>div:first-child{
  17. 17             background: blue;
  18. 18             /*左浮动*/
  19. 19             float: left;
  20. 20         }
  21. 21         #box>div:nth-child(2){
  22. 22             background: yellow;
  23. 23         }
  24. 24         #box>div:nth-child(3){
  25. 25             background: green;
  26. 26         }
  27. 27     </style>
  28. 28 </head>
  29. 29 <body>
  30. 30     <div id="box">
  31. 31         <div></div>
  32. 32         <div></div>
  33. 33         <div></div>
  34. 34     </div>
  35. 35 </body>
  36. 36 </html>

 

 

 

第一个蓝色div左浮动之后，覆盖了第二个黄色div，这是因为浮动后的元素将不在页面中占据空间

 

第一个div右浮动：

 

  1.  1 <!DOCTYPE html>
  2.  2 <html lang="en">
  3.  3 <head>
  4.  4     <meta charset="UTF-8">
  5.  5     <title>浮动</title>
  6.  6     <style>
  7.  7         #box{
  8.  8             width: 600px;
  9.  9             height: 600px;
  10. 10             background: red;
  11. 11         }
  12. 12         #box>div{
  13. 13             width: 200px;
  14. 14             height:200px;
  15. 15         }
  16. 16         #box>div:first-child{
  17. 17             background: blue;
  18. 18             /*右浮动*/
  19. 19             float: right;
  20. 20         }
  21. 21         #box>div:nth-child(2){
  22. 22             background: yellow;
  23. 23         }
  24. 24         #box>div:nth-child(3){
  25. 25             background: green;
  26. 26         }
  27. 27     </style>
  28. 28 </head>
  29. 29 <body>
  30. 30     <div id="box">
  31. 31         <div></div>
  32. 32         <div></div>
  33. 33         <div></div>
  34. 34     </div>
  35. 35 </body>
  36. 36 </html>

可以看到浮动的蓝色div停靠在父元素的右边缘，因为浮动元素的外边缘不会超过父元素的内边缘

当我们浮动以后如果它原有的空间不够，会自动跑到下一行来：

  1.  1 <!DOCTYPE html>
  2.  2 <html lang="en">
  3.  3 <head>
  4.  4     <meta charset="UTF-8">
  5.  5     <title>浮动</title>
  6.  6     <style>
  7.  7         #box{
  8.  8             width: 600px;
  9.  9             height: 600px;
  10. 10             background: red;
  11. 11         }
  12. 12         #box>div{
  13. 13             width: 200px;
  14. 14             height:200px;
  15. 15         }
  16. 16         #box>div:first-child{
  17. 17             background: blue;
  18. 18             float: right;
  19. 19         }
  20. 20         #box>div:nth-child(2){
  21. 21             background: yellow;
  22. 22             float: right;
  23. 23         }
  24. 24         #box>div:nth-child(3){
  25. 25             width: 300px;
  26. 26             height: 300px;
  27. 27             background: green;
  28. 28             float: right;
  29. 29         }
  30. 30     </style>
  31. 31 </head>
  32. 32 <body>
  33. 33     <div id="box">
  34. 34         <div></div>
  35. 35         <div></div>
  36. 36         <div></div>
  37. 37     </div>
  38. 38 </body>
  39. 39 </html>

 

 如果父元素不设置宽高，父元素内的子元素全部浮动的话（浮动将元素排除在普通流之外）那么父元素就感受不到子元素的高度

  1.  1 <!DOCTYPE html>
  2.  2 <html lang="en">
  3.  3 <head>
  4.  4     <meta charset="UTF-8">
  5.  5     <title>浮动</title>
  6.  6     <style>
  7.  7         #box{
  8.  8             background: red;
  9.  9         }
  10. 10         #box>div{
  11. 11             width: 200px;
  12. 12             height:200px;
  13. 13         }
  14. 14         #box>div:first-child{
  15. 15             background: blue;
  16. 16             float: right;
  17. 17         }
  18. 18         #box>div:nth-child(2){
  19. 19             background: yellow;
  20. 20             float: right;
  21. 21         }
  22. 22         #box>div:nth-child(3){
  23. 23             background: green;
  24. 24             float: right;
  25. 25         }
  26. 26     </style>
  27. 27 </head>
  28. 28 <body>
  29. 29     <div id="box">
  30. 30         <div></div>
  31. 31         <div></div>
  32. 32         <div></div>
  33. 33     </div>
  34. 34 </body>
  35. 35 </html>

 

 

解决方法一：设置父元素的宽高

方法二：overflow: hidden;

  1.  1 <!DOCTYPE html>
  2.  2 <html lang="en">
  3.  3 <head>
  4.  4     <meta charset="UTF-8">
  5.  5     <title>浮动</title>
  6.  6     <style>
  7.  7         #box{
  8.  8             background: red;
  9.  9             /*在不设置宽高的情况下，让父元素可以感知到子元素的高度*/
  10. 10             overflow: hidden;
  11. 11         }
  12. 12         #box>div{
  13. 13             width: 200px;
  14. 14             height:200px;
  15. 15         }
  16. 16         #box>div:first-child{
  17. 17             background: blue;
  18. 18             float: right;
  19. 19         }
  20. 20         #box>div:nth-child(2){
  21. 21             background: yellow;
  22. 22             float: right;
  23. 23         }
  24. 24         #box>div:nth-child(3){
  25. 25             background: green;
  26. 26             float: right;
  27. 27         }
  28. 28     </style>
  29. 29 </head>
  30. 30 <body>
  31. 31     <div id="box">
  32. 32         <div></div>
  33. 33         <div></div>
  34. 34         <div></div>
  35. 35     </div>
  36. 36 </body>
  37. 37 </html>

 

方法三：父元素浮动

  1.  1 <!DOCTYPE html>
  2.  2 <html lang="en">
  3.  3 <head>
  4.  4     <meta charset="UTF-8">
  5.  5     <title>浮动</title>
  6.  6     <style>
  7.  7         #box{
  8.  8             background: red;
  9.  9             /*在不设置宽高的情况下，让父元素可以感知到子元素的高度*/
  10. 10             /*overflow: hidden;*/
  11. 11             float: left;
  12. 12         }
  13. 13         #box>div{
  14. 14             width: 200px;
  15. 15             height:200px;
  16. 16         }
  17. 17         #box>div:first-child{
  18. 18             background: blue;
  19. 19             float: right;
  20. 20         }
  21. 21         #box>div:nth-child(2){
  22. 22             background: yellow;
  23. 23             float: right;
  24. 24         }
  25. 25         #box>div:nth-child(3){
  26. 26             background: green;
  27. 27             float: right;
  28. 28         }
  29. 29     </style>
  30. 30 </head>
  31. 31 <body>
  32. 32     <div id="box">
  33. 33         <div></div>
  34. 34         <div></div>
  35. 35         <div></div>
  36. 36     </div>
  37. 37 </body>
  38. 38 </html>

 

 清除浮动：clear：left/right/both

首先定义两个div，一个浮动，一个不浮动，正常情况，浮动的div会把不浮动的div给遮住

  1.  1 <!DOCTYPE html>
  2.  2 <html lang="en">
  3.  3 <head>
  4.  4     <meta charset="UTF-8">
  5.  5     <title>清除浮动</title>
  6.  6     <style>
  7.  7         #box{
  8.  8             width: 400px;
  9.  9             height: 400px;
  10. 10             background: red;
  11. 11         }
  12. 12         #box>div:first-child{
  13. 13             width: 200px;
  14. 14             height: 200px;
  15. 15             background: green;
  16. 16             float: left;
  17. 17         }
  18. 18         #box>div:nth-child(2){
  19. 19             width: 200px;
  20. 20             height: 200px;
  21. 21             background: blue;
  22. 22             /*clear: both;*/
  23. 23         }
  24. 24     </style>
  25. 25 </head>
  26. 26 <body>
  27. 27     <div id="box">
  28. 28         <div></div>
  29. 29         <div></div>
  30. 30     </div>
  31. 31 </body>
  32. 32 </html>

解决方法：清除浮动

  1.  1 <!DOCTYPE html>
  2.  2 <html lang="en">
  3.  3 <head>
  4.  4     <meta charset="UTF-8">
  5.  5     <title>清除浮动</title>
  6.  6     <style>
  7.  7         #box{
  8.  8             width: 400px;
  9.  9             height: 400px;
  10. 10             background: red;
  11. 11         }
  12. 12         #box>div:first-child{
  13. 13             width: 200px;
  14. 14             height: 200px;
  15. 15             background: green;
  16. 16             float: left;
  17. 17         }
  18. 18         #box>div:nth-child(2){
  19. 19             width: 200px;
  20. 20             height: 200px;
  21. 21             background: blue;
  22. 22             /*清除浮动*/
  23. 23             clear: both;
  24. 24         }
  25. 25     </style>
  26. 26 </head>
  27. 27 <body>
  28. 28     <div id="box">
  29. 29         <div></div>
  30. 30         <div></div>
  31. 31     </div>
  32. 32 </body>
  33. 33 </html>

 

 完美解决

清除浮动的常用方式

  1. 结尾处加空div标签clear：both（或在下一个元素上加chear：both）
  2. 浮动元素的父级div定义overflow：hidden
  3. 浮动元素的父元素定宽高

原文链接：http://www.cnblogs.com/renbotao/p/13935856.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号