登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 安全 ›CSS3 清除浮动

CSS3 清除浮动

姨番单 2025-6-19 20:35:12
CSS3 清除浮动

基础代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.    
  8. </head>
  9. <body>
  10.     <h1>Hello World</h1>
  11.    
  12.         
  13.         
  14.    
  15. </body>
  16. </html>
复制代码

  • 先去掉h1,和body的margin
  • 一个没有宽高限制的盒子包裹两个固定宽高的子盒子。
  • 让第一个去最左边，第二个去最右边
    代码如下
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.    
  8. </head>
  9. <body>
  10.     <h1>Hello World</h1>
  11.    
  12.         
  13.         
  14.    
  15. </body>
  16. </html>
复制代码
可以看到因为子容器脱离了标准流，导致父容器无法感知子容器的高度，而高度为0.
清除浮动代码
  1. /* 清除浮动代码 */
  2. .clearfix:before,
  3. .clearfix:after {
  4.         content: "";
  5.         display: table;
  6. }
  7. .clearfix::after {
  8.         clear: both;
  9. }
  10. /* 用来兼容IE */
  11. .clearfix {
  12.         zoom: 1;
  13. }
复制代码
或者更简洁的做法
  1. .clearfix::after {
  2.         content: "";
  3.         display: table;
  4.         clear: both;
  5. }
复制代码
或者更加现代的做法，但是不支持IE
  1. .clearfix {
  2.         display: flow-root;
  3. }
复制代码
使用相对布局
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.    
  8. </head>
  9. <body>
  10.     <h1>Hello World</h1>
  11.    
  12.         
  13.         
  14.    
  15. </body>
  16. </html>
复制代码
子元素同意脱离标准流，但是暂时不知道如何使父元素包裹子元素。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
姨番单
2025-6-19 20:35:12

0

粉丝关注

9

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫