css中清除浮动的六种方法

标签：code   图片   col   一个   info   ima   display   hidden   span   

浮动前是这样：

清除浮动后是这样：

法一：给box1设置一个高度，将box2挤出来

法二：给box2添加 clear属性，直接清除浮动

法三：给box1中的最后元素加上一个块级元素（内墙法），并将添加的属性设置clear属性

法四：给box1和box2中间加上一个块级元素（外墙法），并将添加的属性设置clear属性

法五：伪元素法

 .box1::after{
            /*设置添加的子元素的内容为空*/
            content: "";
            /*设置添加的子元素为块级元素*/
            display: block;
            /*设置添加的子元素的高度为0*/
            height: 0;
            /*设置添加的子元素看不见*/
            visibility: hidden;
            /*给添加的子元素设置clear: both;*/
            clear: both;
        }

法六：box1设置  overflow: hidden

注意：overflow：hidden用途

1.可以将超出标签范围的内容裁剪掉

2.清除浮动

3.可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来

css中清除浮动的六种方法

标签：code   图片   col   一个   info   ima   display   hidden   span   

原文地址：https://www.cnblogs.com/xljdlx/p/9047085.html