• 技术文章 >web前端 >前端问答

    css3清除浮动的几种方式是什么

    长期闲置长期闲置2022-04-24 15:35:02原创141

    方式:1、在一个空的div标签中设置“clear:both”样式来清除浮动;2、给父级元素添加了一个“:after”伪元素,通过清除伪元素的浮动来清除浮动;3、给父元素设置overflow样式,属性值不为visible都可以清除浮动。

    本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。

    css3清除浮动的几种方式是什么

    浮动(float)可以控制浮动框左右移动,直到遇到另一个浮动框或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流,当元素浮动之后,不会影响块级元素的布局,只会影响内联元素布局。

    此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候,此时就会出现“高度塌陷”:

    11.png

    上图中父元素撑开的高度是padding带来的效果,父元素没有设置高度。

    在父元素没有设置高度的情况下:

    如果父元素里的子元素没有设置浮动,那么父元素的高也会自动被撑开的,出现高度值;

    如果父元素里的子元素设置了浮动,那么父元素的高就不会自动被撑开的,也就没有高度值。

    显然这样设置浮动后出现了一些问题,比如:

    父元素的margin受到影响,无法实现上下左右居中,

    若没有给父元素设置高度,浮动后父元素的高度没有被撑开,那么父元素就不会在显示屏上显示。

    css如何清除浮动?清除浮动的几种方式是什么?

    (1)使用clear:both清除浮动

    在代码中在放一个空的div标签,然后给这个标签设置clear:both来清除浮动对页面的影响。它的优点是简单,方便兼容性好,但是一般情况下不建议使用该方法,因为会造成结构混乱,不利于后期维护

    <div style="clear: both"></div>

    (2)利用伪元素:after来清除浮动

    给父级元素添加了一个:after伪元素,通过清除伪元素的浮动,达到撑起父元素高度的目的

    .clearfix:after{
        content:"";
        display:block;
        visibility:hidden;
        clear:both;
        }

    (3)使用CSS的overflow属性

    当给父元素设置了overflow样式,不管是overflow:hidden或overflow:auto都可以清除浮动只要它的值不为visible就可以了,它的本质就是建构了一个BFC,这样使得达到撑起父元素高度的效果

    .box{border:1px solid #ccc;background:#eff2f4;overflow: auto}

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

    以上就是css3清除浮动的几种方式是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:jquery字母怎么转换首字母大写 下一篇:jquery闭包是什么意思
    千万级数据并发解决方案

    相关文章推荐

    • css3双线边框是什么意思• css3有阴影效果吗• css3控制旋转方向的属性是什么• css3属性选择器的用法是什么• 怎么设置rotate在css3的旋转中心点
    1/1

    PHP中文网