清除浮动的方法

最新推荐文章于 2024-07-10 15:31:18 发布

划船不用桨--

最新推荐文章于 2024-07-10 15:31:18 发布

阅读量49

点赞数

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

本文链接：https://blog.csdn.net/weixin_43663349/article/details/119929085

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

方法一：给标准的父元素强制给一个合适的高度
方法二：clear属性
方法三：隔墙法
方法四：伪类
方法五：溢出隐藏
总结

方法一：给标准的父元素强制给一个合适的高度

方法二：clear属性

方法三：隔墙法

外墙法
内墙法

方法四：伪类

本质：使用伪类方法利用css代码书写一堵内墙
伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置
:after这个伪类表示选中的是某个标签内部的最后的位置
书写方法：

前面必须加普通的选择器，后面连续书写伪类名称
content 属性来指定要插入的内容,注意为字符串类型，必选参数

将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个clearfix的类名

<style>
       .div1 {
           background: pink;
           border: 1px solid black;
           margin-bottom: 50px;

       }

       .div1 p {
           float: left;
           width: 50px;
           height: 50px;
           background: red;
           margin-left: 5px;
       }

       .clearfix:after {
           content: "1";/* 添加一个文字内容 */
           display: block;/* 将文字转为块级元素 */
           height: 0;/* 将盒子高度固定为0，避免content内容影响父盒子高度 */
           clear: both;/* 清除前面浮动影响 */
           visibility: hidden;/* 将创建的元素占位置隐藏 */
       }
   </style>
</head>

<body>
   <div class="div1 clearfix">
       <p></p>
       <p></p>
       <p></p>
       <p></p>
   </div>
   <div class="div1 clearfix">
       <p></p>
       <p></p>
       <p></p>
       <p></p>
   </div>

</body>

在这里插入图片描述

养成样式类出现问题用控制台进行检查的习惯
比如

查看控制台我们发现没有类名
修改类名的书写方式

有了clearfix的类名,但是该标签内部的最后没有添加相应的内容
少了content

查看还是没有效果，我们此时回去仔细查看手册或者凭借经验，content的属性值的数据类型要为字符串

查看效果修改成功

方法五：溢出隐藏

给内部有浮动子元素的父元素添加溢出隐藏overflow:hidden属性，可以解决浮动的所有问题

 <style>
        .div1 {
            background: pink;
            border: 1px solid black;
            margin-bottom: 50px;
            overflow: hidden;
        }

        .div1 p {
            float: left;
            width: 50px;
            height: 50px;
            background: red;
            margin-left: 5px;
        }
    </style>
</head>

<body>
    <div class="div1">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <div class="div1">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>

</body>

在这里插入图片描述

原因：元素设置高度后，overflow:hidden效果是将超出部分直接隐藏；没有设置高度，如果元素同时设置了overflow:hidden属性，元素会自适应高度
高度自适应的原因：一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素高度，无论子元素是标准还是浮动，都会将最高的高度作为父盒子加载
浮动影响后面的元素：父元素有了高度后，可以管理住内部所有的浮动元素，不会延伸到后面标签中影响贴边

总结

如果父元素高度是固定的，建议使用height属性解决
如果父元素高度需要自适应，建议使用overflow属性解决浮动问题

划船不用桨--

关注

0
点赞
踩
0

收藏

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

方法一：给标准的父元素强制给一个合适的高度方法二：clear属性方法三：隔墙法外墙法内墙法方法四：伪类本质：使用伪类方法利用css代码书写一堵内墙伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置:after这个伪类表示选中的是某个标签内部的最后的位置书写方法：前面必须加普通的选择器，后面连续书写伪类名称content 属性来指定要插入的内容,注意为字符串类型，必选参数将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个cl.
复制链接

扫一扫