CSS基础-清除浮动

清除浮动

清除浮动

盒子高度问题

• 在标准流中内容的高度可以撑起盒子的高度
• 在浮动流中浮动元素内容的高不可以撑起盒子的高

清除浮动方式一

• 给前面的父盒子添加高度
• 注意点:在企业开发中能不写高度就不写高度, 所以这种方式不常用

清除浮动方式二

• 利用clear:both;属性清除前面浮动元素对我的影响
• 注意点:使用clear:both之后margin-top属性会失效, 所以不常用

清除浮动方式三

• 在两个有浮动子元素的盒子之间添加一个额外的块级元素
• 注意点:在外墙法中可以通过设置额外标签的高度来实现margin效果搜狐中大量使用了这个技术, 但是由于需要添加大量无意义的标签, 所以不常用

清除浮动方式四

• 在前面一个盒子的最后添加一个额外的块级元素
• 注意点:外墙法会自动撑起盒子的高度, 所以可以直接设置margin属性，和内墙法一样需要添加很多无意义的空标签，有违结构与表现的分离

清除浮动方式五

• 给前面一个盒子添加overflow:hidden属性
• 注意点:由于overflow:hidden可以撑起盒子的高度, 所以可以直接设置margin属性，IE8以前不支持利用overflow:hidden来清除浮动, 所以需要加上一个*zoom:1;

清除浮动方式六

• 给前面的盒子添加伪元素来清除浮动
• 示例代码

html
<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        li{
            float: left;
        }

        /*这里*/
        .clearfix:after {
            /*生成内容作为最后一个元素*/
            content: "";
            /*使生成的元素以块级元素显示,占满剩余空间*/
            display: block;
            /*避免生成内容破坏原有布局的高度*/
            height: 0;
            /*使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互*/
            visibility: hidden;
            /*重点是这一句*/
            clear: both;
        }
        .clearfix {
            /*用于兼容IE, 触发IE hasLayout*/
            *zoom:1;
        }
</style>

• 注意点:本质上和内墙法一样, 都是在前面一个盒子的最后添加一个额外的块级元素；添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性；CSS中还有一个东西叫做伪类, 伪元素和伪类不是同一个东西