一天搞定CSS：清除浮动（float）--13

来源：互联网发布：大数据文化产业编辑：程序博客网时间：2024/05/19 02:01

上一节已经说明了为什么要清除浮动了。这里我们就来解决浮动产生的各种问题。

为什么要清楚浮动？

地址：http://blog.csdn.net/baidu_37107022/article/details/71554283

1.清除浮动方法概览

这里写图片描述

2.clear方法

这里写图片描述

代码演示

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            div{                width: 100px;                height: 200px;                background: red;            }            /*1.left   元素的左边不能有浮动的元素*/            /*.div1{                float: left;            }            .div2{                clear: left;            }*/            /*2.right       元素的右边不能有浮动的元素*/            /*.div1{                float: right;            }            .div2{                clear: right;            }*/            /*3.both        元素的两都不能有浮动的元素*/            .div1{                float: left;            }            .div2{                float: right;            }            .div3{                clear: both;            }        </style>    </head>    <body>        <!--            clear           元素的某个方向上不能有浮动的元素                left        元素的左边不能有浮动的元素                right       元素的右边不能有浮动的元素                both        元素的两都不能有浮动的元素        -->        <div class="div1">kaivon1</div>        <div class="div2">kaivon2</div>        <div class="div3">kaivon3</div>    </body></html>

效果图

清除浮动前：div3钻到了div1下面
这里写图片描述

清除浮动后：
这里写图片描述

3.方法2–6的

这里写图片描述

代码演示：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            .parent{                border: 1px solid #f00;                /*2、给父级添加高度：没有从根本上解决浮动的问题*/                /*height: 100px;*/                /*3、inline-block*/                /*display: inline-block;                margin: 0 auto;*/                /*4、overflow:hidden;*/                /*overflow: hidden;*/            }            .box{                width: 100px;                height: 100px;                background: green;                float: left;            }        </style>    </head>    <body>        <!--            清除浮动的方法                1、clear                2、给父级添加高度                    有的时候是不能给父级添加高度的，所以这个方法就用不了（父级没有高度的情况下）                3、inline-block                    具有与上一个的清除浮动一样的总是，同时加了以后这个元素就没有办法居中了                4、overflow:hidden;                    如果子级有定位的话，并且这个定位超出了父级的范围，那样的话就看不到了，所以不能加这个命令                5、空标签                    空标签是没有内容，但是它的作用是用来清除浮动的，所以不符合行为、样式、结构相分离的标准                    ie6下标签是有一个最小高度19px，解决后也会有2像素的偏差                6、br清除浮动                    与上面的问题是一样                7、after伪类清除浮动（现在最主流的方法）        -->        <div class="parent">            <div class="box"></div>            <!--5、空标签-->            <!--<div style="clear: both;"></div>-->            <!--6、br清除浮动-->             <br clear="all" />        </div>    </body></html>

效果图

清除浮动前：

这里写图片描述

清除浮动后：
这里写图片描述

4.after伪类清除浮动（现在最主流的方法）

这里写图片描述

代码演示

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            .parent{                border: 1px solid #f00;            }            .box{                width: 100px;                height: 100px;                background: green;                float: left;                color: #fff;            }            /*             * 7、after伪类清除浮动（现在最主流的方法）             *              * .box:after{                content: '这是伪类生成的内容';            }*/            .clearfix{                *zoom:1;            }            .clearfix:after{                content: '';                display: block;                clear: both;            }        </style>    </head>    <body>        <!--            清除浮动的方法                1、clear                2、给父级添加高度                    有的时候是不能给父级添加高度的，所以这个方法就用不了（父级没有高度的情况下）                3、inline-block                    具胡与上一个的清除浮动一样的总是，同时加了以后这个元素就没有办法居中了                4、overflow:hidden;                    如果子级有定位的话，并且这个定位超出了父级的范围，那样的话就看不到了，所以不能加这个命令                5、空标签                    空标签是没有内容，但是它的作用是用来清除浮动的，所以不符合行为、样式、结构相分离的标准                    ie6下标签是有一个最小高度19px，解决后也会有2像素的偏差                6、br清除浮动                    与上面的问题是一样                7、after伪类清除浮动（现在最主流的方法）                    after       代表选择到的元素的内容的最后面                                after伪类的内容默认是一个行内元素                    content     设置的内容        -->        <div class="parent clearfix">            <div class="box"></div>        </div>    </body></html>

效果图同上（第3点）

0 0

一天搞定CSS： 清除浮动（float）--13

1.清除浮动方法概览

2.clear方法

3.方法2–6的

4.after伪类清除浮动（现在最主流的方法）

一天搞定CSS：清除浮动（float）--13