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

作者: NiceBlueChai | 来源:发表于2017-12-13 14:18 被阅读28次

CSS: clear 清除浮动解决网页中的“塌陷”问题
清除浮动，定位
清除浮动的几种方法
清除浮动
清除浮动
清除浮动
清除浮动
CSS clear both清除浮动
文档流例程小册【处理高度塌陷】
清除浮动

什么是塌陷
如果父级元素只包含浮动元素,那么在未设置高度的情况下,父级元素的高度塌陷为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;/*将添加进的对象作为清除浮动的对象,实现外围容器中有内容存在,因此可以自动判断高度*/
        }