css的float清除浮动（超简单）

最新推荐文章于 2024-05-20 22:08:52 发布

林-

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量101

点赞数

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

本文链接：https://blog.csdn.net/weixin_42571979/article/details/119826881

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

我们使用浮动元素，目的就是为了改变元素的标准文档流，使块元素内容能排列成成一行，但是使用之后会发现父级内容撑不起来。
像这样：
在这里插入图片描述
效果：

如何处理呢？
直接上代码：四种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
</head>
<style>
        .main{
            border:5px solid black;
        }
        .float-child{
            float: left;
        }
        .clear{
            clear: both;
        }

        /*
            清除浮动
            方法1: 父元素设置overflow:hidden或者overflow:auto;
            方法2：父元素设置float(不推荐)
            方法3：父元素设置class   :after 伪类
              .main:after{
                    content: '';
                    display: block;
                    clear: both;
              }
            方法4：在浮动的子元素同级结尾定义<div class="clear"></div> 
        */
</style>
<body>
    <div class="main">
            <div class="float-child">
                我浮动了
            </div>
            <div class="float-child">
                我浮动了
            </div>
            <div class="clear"></div>
    </div>
    <div>
        正文
    </div>
</body>
</html>

我这里用的是上面的最后一种！

林-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css的float清除浮动（超简单）

css的float清除浮动（超简单）我们使用浮动元素，目的就是为了改变元素的标准文档流，使块元素内容能排列成成一行，但是使用之后会发现父级内容撑不起来。像这样：效果：如何处理呢？直接上代码：四种方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge
复制链接

扫一扫