清除浮动

最新推荐文章于 2024-04-15 08:33:14 发布

Pipe Piper

最新推荐文章于 2024-04-15 08:33:14 发布

阅读量82

点赞数

分类专栏： css 文章标签： html css

本文链接：https://blog.csdn.net/m0_43400684/article/details/109351806

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

上下排列：clear属性，表示清除浮动，left/right/both, 多用both

嵌套排列：

固定宽高：不推荐，不方便自适应

父元素浮动：（此时父元素与子元素在同一个文档流下，所以额可以达到清除浮动效果）不推荐，但会影响后面的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 300px;
            border: 3px black solid;
            float: left;
        }
        .box2{
            width: 200px;
            height: 100px;
            background-color:pink;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

效果：

在这里插入图片描述

overflow：hiden（BFC规范），如果有子元素想溢出，那么会受到影响
display：inline-block(BFC规范)，不推荐，父容器会影响到后面的元素

设置空标签：不推荐，会多增加一个标签

在浮动元素下方加一个空标签，并设置clear属性，用它来撑开父容器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 300px;
            border: 3px black solid;
        }
        .box2{
            width: 200px;
            height: 100px;
            background-color:pink;
            float: left;
        }
        /* 空标签 */
        .clear{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <!-- 在此加入空标签，并设置clear属性 -->
        <div class="clear"></div>
    </div>
</body>
</html>

after伪类：推荐！它是空标签加强版，目前各大公司的做法

注意：clear属性只能操作块标签，对内联标签不起作用

注意after伪类加的位置，是父容器

after生成的内容是放在寄生元素内部的，且在该内部的最后面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 300px;
            border: 3px black solid;
        }
        .box2{
            width: 200px;
            height: 100px;
            background-color:pink;
            float: left;
        }
        /* after伪类 */
        .box1:after{
            content: '';display: block;clear: both; 
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

Pipe Piper

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
清除浮动

上下排列：clear属性，表示清除浮动，left/right/both, 多用both嵌套排列：固定宽高：不推荐，不方便自适应父元素浮动：（此时父元素与子元素在同一个文档流下，所以额可以达到清除浮动效果）不推荐，但会影响后面的元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="widt
复制链接

扫一扫