姨番单 发表于 2025-6-19 20:35:12

CSS3 清除浮动

CSS3 清除浮动

基础代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>
<body>
    <h1>Hello World</h1>
   
      
      
   
</body>
</html>
[*]先去掉h1,和body的margin
[*]一个没有宽高限制的盒子包裹两个固定宽高的子盒子。
[*]让第一个去最左边,第二个去最右边
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>
<body>
    <h1>Hello World</h1>
   
      
      
   
</body>
</html>可以看到因为子容器脱离了标准流,导致父容器无法感知子容器的高度,而高度为0.
清除浮动代码

/* 清除浮动代码 */
.clearfix:before,
.clearfix:after {
        content: "";
        display: table;
}
.clearfix::after {
        clear: both;
}
/* 用来兼容IE */
.clearfix {
        zoom: 1;
}或者更简洁的做法
.clearfix::after {
        content: "";
        display: table;
        clear: both;
}或者更加现代的做法,但是不支持IE
.clearfix {
        display: flow-root;
}使用相对布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>
<body>
    <h1>Hello World</h1>
   
      
      
   
</body>
</html>子元素同意脱离标准流,但是暂时不知道如何使父元素包裹子元素。

来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: CSS3 清除浮动