CSS: clear 清除浮动解决网页中的“塌陷”问题

最新推荐文章于 2023-07-14 08:00:00 发布

NiceBlueChai

最新推荐文章于 2023-07-14 08:00:00 发布

阅读量544

点赞数

本文链接：https://blog.csdn.net/nicebluechai/article/details/103594038

版权

什么是塌陷
如果父级元素只包含浮动元素,那么在未设置高度的情况下,父级元素的高度塌陷为0;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        #wrap{border: black 5px solid;text-align: center;}
        .child{
            height:300px ;
            width:420px;
            float: left;
        }
        #child1{background-color: red;}
        #child2{background-color:green ;}
        #child3{background-color: blueviolet;}
    </style>
    <body>
        <div id="wrap">
            <div id="child1" class="child"></div>
            <div id="child2" class="child"></div>
            <div id="child3" class="child"></div>
            
        </div>
    </body>
</html>

可以看到在父级元素的高度塌陷为0,只剩下了黑色边框.

解决网页"塌陷"
1.创建一个用来清除浮动的css样式(.clearfix)
2.针对包裹的全是浮动元素的父级容器使用(.clearfix)

.clearfix{zoom:1;}/*zoom属性：IE浏览器专用的属性，为了兼容老版本的IE浏览器使用*/
.clearfix:after{ /*:after 伪对象选择符 --在这个对象被浏览器渲染之后添加一些内容*/
            content: ".";/*content属性 : 添加的内容写在这个属性中,与伪对象同时出现 必须有该属性*/
            display: block;/*将添加的内容转换为块状元素显示*/
            visibility: hidden;/*visibility:可视化属性,控制元素是否可见,始终保留元素的物理空间*/
            height: 0;/*将添加的内容高度设为0,消除占位*/
            clear: both;/*将添加进的对象作为清除浮动的对象,实现外围容器中有内容存在,因此可以自动判断高度*/
        }

NiceBlueChai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS: clear 清除浮动解决网页中的“塌陷”问题

什么是塌陷如果父级元素只包含浮动元素,那么在未设置高度的情况下,父级元素的高度塌陷为0;<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> ...
复制链接

扫一扫