tnblog
首页
视频
资源
登录
原

浮动与清除浮动与解决高度坍塌

3366人阅读 2022/3/9 9:51 总访问：846298 评论：0 收藏：0 手机
分类: 前端

方法1：最后增加一个元素，使用浮动清除，代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  9.     <style>
  11.         .content
  12.         {
  13.             width: 500px;
  14.             background-color: lightgreen;        
  15.         }
  17.         .item
  18.         {
  19.             height: 100px;
  20.             width: 100px;
  21.             background-color: #abcdff;
  22.             border: 1px solid red;
  23.             box-sizing: border-box;
  24.             float: left;
  25.         }
  27.         .last
  28.         {
  29.             /* 清除浮动 */
  30.             clear: both;
  31.         }
  32.     </style>
  34. </head>
  35. <body>
  37.     <div class="content">
  38.         <div class="item">1</div>
  39.         <div class="item">2</div>
  40.         <div class="item">3</div>
  41.         <div class="item">4</div>
  42.         <div class="item">5</div>
  43.         <div class="item">6</div>
  44.         <div class="last"></div>
  45.     </div>
  47. </body>
  48. </html>

方法2：伪类选择器，不用添加元素

  1. .content::after
  2. {
  3.     content: "";
  4.     display: block;
  5.     clear: both;
  6. }

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价
这一生多幸运赶上过你.
博主信息
排名
8
文章
231
粉丝
7
评论
7
文章类别
最新文章
最新评价
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术