css中清除浮动有哪几种方式


本文摘自PHP中文网,作者V,侵删。

css中清除浮动有【clear:both】、after伪元素、对父级设置高度、对父级设置【overflow:hidden】四种方式。其中推荐使用的方式是使用after伪元素清除浮动。

本文操作环境:windows10系统、css 3、thinkpad t480电脑。

CSS中清除浮动的四种方式如下:

1、clear:both清除浮动

HTML代码:

1

2

3

4

5

<div class="container">

    <div class="left">left浮动</div>

    <div class="right">right浮动</div>

    <div class="clear"></div>

</div>

CSS代码:

1

2

3

4

5

6

7

8

9

10

11

<style>

        .container{

            margin:40px auto;

            width:400px;

            border:5px solid grey;

            background: yellow;/*背景正常显示*/

        }

        .left{float:left;width:200px;height:100px;border: 1px solid red;}

        .right{float:right;width:196px;height:100px;border: 1px solid red;background: blue;}  /*边框能撑开*/

        .clear{clear:both;}

    </style>

结果:

83b31a8e95f23f8481c9af2465f8706.png

父级背景以及边框也能正常显示和撑开了,优点方便使用,缺点是会多加HTML空标签

2、使用after伪元素清除浮动(推荐使用)

优点:无需额外的标签,浏览器兼容性好,是目前用的最多的一种清除浮动的方法之一,企业都在用;

缺点:ie6-7不支持伪元素:after,使用zoom:1触发hasLayout.

HTML代码:

1

2

3

4

<div class="container">

    <div class="left">left浮动</div>

    <div class="right">right浮动</div>

</div>

(学习视频分享:css视频教程)

CSS代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<style>

        .container{

            width:400px;

            border:5px solid grey;

            background: yellow;

        }

        .left{float:left;width:200px;height:100px;border: 1px solid red;}

        .right{float:right;width:196px;height:100px;border: 1px solid red;background: blue;}

        .container:after{

            content:"";

            display: block;

            clear:both;

        }

        .container{    *zoom: 1;    /*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/ }

    </style>

结果显示:

e53202b8739bbfcd37fdbd1dc7dd346.png

3、对父级设置适合CSS高度

一般设置高度需要能确定内容高度才能设置。这里我们知道内容高度是100PX+上下边框为2px,这样具体父级高度为102px,

只需在上面的浮动缺点副作用代码中的设置类样式.container加上父级高度即可,这里我就不做过多演示了。缺点也非常明显,本人不建议这样清除浮动。

4、对父级设置overflow:hidden

原理:父元素定义overflow:hidden,此时,浏览器会自动检查浮动区域的高度;

优点:简单,无需增加新的标签;

缺点:不能和position配合使用,因为超出的尺寸的会被隐藏;

代码也是在副作用基础上container中添加上overflow:hidden或者auto即可实现清除浮动效果

结果显示:

23a2e1791602e4945a169954674fd4f.png

优缺点:很完美,但是属性太多;不好分别。

相关推荐:CSS教程

以上就是css中清除浮动有哪几种方式的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

css如何绘制一只萌萌哒的大熊猫?(代码示例)

css设置table圆角边框不起作用是什么原因

怎么加载css文件

css vw是什么单位

css怎么设置草书字体

css放在html的哪里

css 绝对定位是什么

css3如何实现阴影效果

css flex-wrap属性怎么用

css怎么实现不可点击功能样式

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...