dmz社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 937|回复: 0

[Html/Css] css 关于浮动float的使用以及清除浮动

[复制链接]
  • TA的每日心情

    2024-2-20 11:15
  • 签到天数: 11 天

    [LV.3]偶尔看看II

    878

    主题

    4343

    帖子

    3987

    积分

    终身会员[A]

    Rank: 7Rank: 7Rank: 7

    积分
    3987

    发表于 2020-4-12 19:00:07 | 显示全部楼层 |阅读模式

    本站资源全部免费,回复即可查看下载地址!

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    float:none | left | right
    默认值:none
    适用于:所有元素         
    none:设置对象不浮动left:设置对象浮在左边right:设置对象浮在右边
    • 当该属性不等于none引起对象浮动时,对象将被视作块对象(block-level),即[url=]display[/url]属性等于block。也就是说,浮动对象的display特性将被忽略。
    • float在绝对定位和[url=]display[/url]为none时不会被应用。
    • 什么时候用浮动?--让元素变成一行,水平布局时、需要文本环绕效果时
    • 浮动的特点,半脱离文档流,且会对后面的元素产生影响。
      1、父级没有设置高度的时候,会出现塌陷
      2、父级的宽度不够,会换行排列
      3、改变元素类型 变成行内块
    • 清除浮动float的三种方法
    • 对后面的元素进行操作。
    给后面元素添加,clear:both;
    1.1额外标签法(在最后一个浮动标签后,新加一个标签,给其设置clear:both;)(不推荐)
    2触发BFC效果。
    通过触发BFC方式,实现清除浮动
    父级添加overflow属性(父元素添加overflow:hidden)(不推荐)
    3对父元素进行操作.
    3.1父级添加overflow属性(父元素添加overflow:hidden)(不推荐)
    3.2使用after伪元素清除浮动(推荐使用)
    3.3使用before和after双伪元素清除浮动





    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|小黑屋|本站代理|dmz社区

    GMT+8, 2024-12-23 15:46 , Processed in 0.080802 second(s), 33 queries .

    Powered by Discuz! X3.4 Licensed

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表